How to Create a Page in Next.js: Simple Guide

To create a page in Next.js, add a React component file inside the pages folder. The file name becomes the URL path, and exporting a default function defines the page content.

Syntax

In Next.js, a page is a React component exported as default from a file inside the pages directory. The file name determines the URL path.

• pages/: Folder where pages live.
• about.js: File name becomes /about URL.
• export default function: Defines the page component.

javascript

export default function PageName() {
  return <h1>Page Content</h1>;
}

Example

This example shows how to create a simple homepage in Next.js by adding index.js inside the pages folder. The page displays a heading on the root URL /.

javascript

export default function Home() {
  return <h1>Welcome to My Next.js Page!</h1>;
}

Output

Welcome to My Next.js Page!

Common Pitfalls

Common mistakes when creating pages in Next.js include:

• Placing page files outside the pages folder, so Next.js won't recognize them as pages.
• Not exporting the component as default, which breaks page rendering.
• Using uppercase letters or spaces in file names, which can cause URL issues.

javascript

/* Wrong: file outside pages folder */
// src/Home.js
export default function Home() {
  return <h1>Wrong location</h1>;
}

/* Right: file inside pages folder with default export */
// pages/home.js
export default function Home() {
  return <h1>Correct page</h1>;
}

Quick Reference

Step	Description
1	Create a file inside the pages folder.
2	Name the file to match the URL path.
3	Export a React component as default.
4	Use JSX to define the page content.
5	Run Next.js dev server to see the page at the URL.

Key Takeaways

Create pages by adding React component files inside the pages folder.

File names map directly to URL paths in Next.js.

Always export the page component as default.

Keep page files inside the pages directory for Next.js to detect them.

Use simple React functions to define page content.