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 ;
}

Need a 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 */}
    
  );
}

Need a 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 */}
    
  );
}

Need a 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

Need a hint?

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