Page.tsx as route definition in NextJS

Introduction

In Next.js, a file named page.tsx inside a folder automatically becomes the page for that route. This makes it easy to create pages by just adding files.

You want to create a new page on your website by adding a folder with a <code>page.tsx</code> file.

You want to organize routes clearly by grouping related files in folders.

You want to use TypeScript for your page components with automatic routing.

You want to follow Next.js 13+ App Router conventions for defining routes.

Syntax

NextJS

export default function Page() {
  return (
    <main>
      <h1>Hello from this route!</h1>
    </main>
  )
}

The file must be named page.tsx exactly to define a route.

The default exported function is the React component shown for that route.

Examples

This defines the home page if placed in the app folder directly.

NextJS

export default function Page() {
  return <h1>Home Page</h1>
}

Placed inside app/about/page.tsx, this becomes the /about page.

NextJS

export default function Page() {
  return <p>About us content here.</p>
}

Placed inside app/contact/page.tsx, this defines the /contact route.

NextJS

export default function Page() {
  return <div>Contact page with form</div>
}

Sample Program

This is a simple page component that will show a heading and paragraph when you visit the route where this page.tsx file is located.

NextJS

export default function Page() {
  return (
    <main>
      <h1>Welcome to My Site</h1>
      <p>This is the home page defined by page.tsx</p>
    </main>
  )
}

Important Notes

Each folder inside the app directory with a page.tsx file becomes a route.

You can nest folders to create nested routes easily.

Use semantic HTML tags like <main> and <h1> for better accessibility.

Summary

page.tsx files define routes automatically in Next.js App Router.

Place a page.tsx file inside a folder to create that route.

The default export is the React component shown on that route.