Page.tsx as route definition in NextJS - Mini Project: Build & Apply

Page.tsx as Route Definition in Next.js

📖 Scenario: You are building a simple Next.js app. Each page in the app is defined by a Page.tsx file inside the app folder. This file acts as the route definition for that page.For example, a Page.tsx file inside app/about will define the content shown when the user visits /about in the browser.

🎯 Goal: Create a basic Page.tsx file that defines a route in Next.js. The page should display a heading and a paragraph describing the page.

📋 What You'll Learn

Create a functional React component named Page in Page.tsx

Use the default export to export the Page component

Render a heading <h1> with the text Welcome to the Home Page

Render a paragraph <p> with the text This is the main landing page of the app.

Use TypeScript with React in Next.js 14+ app router style

💡 Why This Matters

🌍 Real World

Next.js uses files named Page.tsx inside the app folder to define routes. This pattern helps developers organize pages clearly and build scalable web apps.

💼 Career

Understanding how to define routes with Page.tsx files is essential for Next.js developers. It is a core skill for building modern React-based web applications.

1

Create the basic Page component

Create a functional React component named Page in Page.tsx that returns a <div> with no content yet.

NextJS

export default function Page() {
  // Your code here
  return ;
}

Hint

Start by writing a function named Page that returns a <div> element.

2

Add a heading inside the Page component

Inside the Page component's <div>, add an <h1> element with the exact text Welcome to the Home Page.

NextJS

export default function Page() {
  return (
    
      {/* Add an  with text here */}
    
  );
}

Hint

Use an <h1> tag inside the <div> with the exact text.

3

Add a paragraph describing the page

Below the <h1>, add a <p> element with the exact text This is the main landing page of the app. inside the Page component.

NextJS

export default function Page() {
  return (
    
      Welcome to the Home Page
      {/* Add a  with text here */}
    
  );
}

Hint

Add a paragraph tag below the heading with the exact text.

4

Export the Page component as default

Make sure the Page component is exported as the default export from Page.tsx using export default function Page().

NextJS

export default function Page() {
  return (
    
      Welcome to the Home Page
      This is the main landing page of the app.
    
  );
}
// Confirm default export above

Hint

The function declaration should start with export default function Page() to define the route.

Practice

1. In Next.js App Router, what does a Page.tsx file represent?

easy

A. A route that renders the default exported React component

B. A configuration file for server settings

C. A CSS stylesheet for styling components

D. A utility file for API calls

Solution

1. Step 1: Understand the role of Page.tsx in Next.js App Router

   A Page.tsx file automatically defines a route based on its folder location.

2. Step 2: Identify what the file exports

   The default export of Page.tsx is the React component rendered when visiting that route.

3. Final Answer:

   A route that renders the default exported React component -> Option A

4. Quick Check:

   Page.tsx = route component [OK]

Hint: Page.tsx file = route + component [OK]

Common Mistakes:

• Thinking Page.tsx is for styling or config
• Confusing Page.tsx with API route files
• Assuming Page.tsx exports multiple components

2. Which of the following is the correct way to define a route component in Page.tsx?

easy

A. export default function Page() { return Hello }

B. function Page() { return Hello }

C. export function Page() { return Hello }

D. const Page = () => { Hello }

Solution

1. Step 1: Check for default export

   Next.js requires the route component to be the default export from Page.tsx.

2. Step 2: Verify the function returns JSX correctly

   The function must return JSX explicitly; arrow functions need a return statement or parentheses.

3. Final Answer:

   export default function Page() { return <div>Hello</div> } -> Option A

4. Quick Check:

   Default export + returns JSX = export default function Page() { return
   Hello } [OK]

Hint: Default export function returning JSX is correct [OK]

Common Mistakes:

• Missing default export
• Arrow function without return statement
• Named export instead of default

3. Given this folder structure in Next.js App Router:
/app/about/Page.tsx exports a component showing <h1>About Us</h1>.
What will be rendered when visiting /about in the browser?

medium

A. An error because Page.tsx is missing

B. About Us

C. A blank page

D. The content of the root Page.tsx

Solution

1. Step 1: Map folder to route

   The folder /app/about corresponds to the route /about.

2. Step 2: Render the default export from Page.tsx

   The Page.tsx inside /about exports a component rendering <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option B

4. Quick Check:

   Folder name = route, Page.tsx renders component [OK]

Hint: Folder name = route URL, Page.tsx renders content [OK]

Common Mistakes:

• Confusing root Page.tsx with nested routes
• Expecting error if Page.tsx exists
• Thinking route needs explicit config

4. What is wrong with this Page.tsx file?

export default function Page() {
  
Welcome

}

medium

A. Function name must be lowercase

B. Page.tsx cannot export a function

C. JSX must be wrapped in a fragment

D. Missing return statement inside the function

Solution

1. Step 1: Check function body for return

   The function body has JSX but no return keyword, so it returns undefined.

2. Step 2: Understand JSX rendering requirement

   React components must return JSX explicitly or implicitly; missing return causes no render.

3. Final Answer:

   Missing return statement inside the function -> Option D

4. Quick Check:

   JSX without return = error [OK]

Hint: Always return JSX from component functions [OK]

Common Mistakes:

• Assuming JSX auto-returns without return
• Thinking function name case matters
• Believing JSX must be wrapped in fragment always

5. You want to create a nested route /dashboard/settings in Next.js App Router. Which folder and file structure correctly defines this route?

hard

A. /app/dashboard-settings/Page.tsx

B. /app/dashboard/Page.tsx and /app/settings/Page.tsx

C. /app/dashboard/settings/Page.tsx with default export component

D. /app/dashboard/settings.tsx

Solution

1. Step 1: Understand nested route folder structure

   Nested routes are created by nesting folders inside /app matching the URL path segments.

2. Step 2: Identify correct file placement

   The route /dashboard/settings requires /app/dashboard/settings/Page.tsx with a default export component.

3. Final Answer:

   /app/dashboard/settings/Page.tsx with default export component -> Option C

4. Quick Check:

   Nested folders + Page.tsx = nested route [OK]

Hint: Nested folders match nested routes, Page.tsx inside last folder [OK]

Common Mistakes:

• Placing Page.tsx in wrong folder
• Using dash instead of nested folders
• Naming file settings.tsx instead of Page.tsx