Lesson 3: How to create Layouts and Pages

Creating Layouts and Pages

Prerequisites:

Next.js Project: You should have a Next.js project set up. If you haven't already, follow the steps I provided in Lesson 2 to create a new Next.js project using create-next-app.

Step-by-Step Procedure:

1. Creating Pages:

Next.js uses a file-system routing system. Pages are created by adding files to the app directory.

Basic Page Creation:
- To create a new page, create a new .js, .jsx, .ts, or .tsx file inside the app directory.
- For example, to create an "about" page, create a file named app/about/page.jsx (or .tsx if you're using TypeScript).

Page Content:

Inside the page file, you need to export a React component (usually a functional component) as the default export.

Here's an example:

JavaScript

// app/about/page.jsx
import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default AboutPage;

Accessing Pages:
- You can access the page in your browser by navigating to the corresponding URL path. For example, the "about" page would be accessible at http://localhost:3000/about.

2. Creating Layouts:

Layouts are used to share UI components between pages. They wrap your pages and can contain things like headers, footers, navigation menus, etc.

Layout Creation:
- To create a layout, create a file named layout.jsx (or .tsx) inside a directory within the app directory.
- Layouts apply to all pages within the directory and its subdirectories.
- For example, to create a layout for a dashboard section, you might create a file at app/dashboard/layout.jsx.

Layout Content:

Inside the layout file, you need to export a React component as the default export.
Layout components receive a children prop, which represents the page or nested layout being rendered within it.

Here's an example:

JavaScript

// app/layout.jsx (Root layout)
import React from 'react';
import './globals.css'; // Import global styles

function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>My App</title>
      </head>
      <body>
        <nav>
          {/* Navigation menu */}
          <a href="/">Home</a> | <a href="/about">About</a>
        </nav>
        <main>{children}</main> {/* Render the page content */}
        <footer>
          {/* Footer */}
          <p>&copy; 2025 My App</p>
        </footer>
      </body>
    </html>
  );
}

export default RootLayout;

JavaScript

// app/dashboard/layout.jsx (Dashboard layout)
import React from 'react';

function DashboardLayout({ children }) {
  return (
    <div>
      <aside>
        {/* Dashboard sidebar */}
        <a href="/dashboard">Dashboard Home</a> | <a href="/dashboard/settings">Settings</a>
      </aside>
      <main>{children}</main> {/* Render the page content */}
    </div>
  );
}

export default DashboardLayout;

Root Layout (app/layout.js):
- Every Next.js app must have a root layout defined at the top level of the app directory (app/layout.js or app/layout.tsx).
- This layout typically includes the <html>, <head>, and <body> tags.
- It's where you should include global styles, metadata, and other elements that are consistent across your entire application.

3. Linking Between Pages:

Next.js provides the <Link> component from next/link for client-side navigation between pages.
Using <Link> is important for performance and accessibility. It prevents full page reloads and provides a smoother user experience.

Example:

JavaScript

import React from 'react';
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to My Next.js App!</h1>
      <p>
        Go to the <Link href="/about">About Page</Link>
      </p>
      <p>
        Go to the <Link href="/dashboard">Dashboard</Link>
      </p>
    </div>
  );
}

export default HomePage;

Sample Example: Nested Layouts and Linking Pages

Let's create a scenario with nested layouts and linking:

Project Structure:

app/
├── layout.js       (Root layout)
├── page.js         (Home page)
├── about/
│   └── page.js     (About page)
└── dashboard/
    ├── layout.js   (Dashboard layout)
    ├── page.js     (Dashboard home page)
    └── settings/
        └── page.js (Dashboard settings page)

Code:

JavaScript

// app/layout.jsx (Root layout)
import React from 'react';
import Link from 'next/link';
import '../styles/globals.css'; // You might have global styles

function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>My App</title>
      </head>
      <body>
        <nav>
          <Link href="/">Home</Link> | <Link href="/about">About</Link> | <Link href="/dashboard">Dashboard</Link>
        </nav>
        <main>{children}</main>
        <footer>
          <p>&copy; 2024 My App</p>
        </footer>
      </body>
    </html>
  );
}

export default RootLayout;

JavaScript

// app/page.jsx (Home page)
import React from 'react';
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome Home!</h1>
      <p>This is the home page.</p>
        Go to the <Link href="/about">About Page</Link>
      </p>
      <p>
        Go to the <Link href="/dashboard">Dashboard</Link>
      </p>
      
      
    </div>
  );
}

export default HomePage;

JavaScript

// app/about/page.jsx (About page)
import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default AboutPage;

JavaScript

// app/dashboard/layout.jsx (Dashboard layout)
import React from 'react';
import Link from 'next/link';

function DashboardLayout({ children }) {
  return (
    <div>
      <aside>
        <h3>Dashboard Navigation</h3>
        <Link href="/dashboard">Dashboard Home</Link> | <Link href="/dashboard/settings">Settings</Link>
      </aside>
      <main>{children}</main>
    </div>
  );
}

export default DashboardLayout;

JavaScript

// app/dashboard/page.jsx (Dashboard home page)
import React from 'react';

function DashboardHomePage() {
  return (
    <div>
      <h1>Dashboard Home</h1>
      <p>Welcome to your dashboard!</p>
    </div>
  );
}

export default DashboardHomePage;

JavaScript

// app/dashboard/settings/page.jsx (Dashboard settings page)
import React from 'react';

function DashboardSettingsPage() {
  return (
    <div>
      <h1>Dashboard Settings</h1>
      <p>Manage your dashboard settings here.</p>
    </div>
  );
}

export default DashboardSettingsPage;

Testing:
1. Run the development server: npm run dev, yarn dev, or pnpm dev.
2. Navigate to http://localhost:3000: You should see the Home page with links.
3. Click the "About Page" link: You should see the About page content, and the navigation and footer from the root layout should be present.
4. Click the "Dashboard" link: You should see the Dashboard Home page, and both the root layout's navigation/footer and the dashboard layout's sidebar should be present.
5. Click the "Settings" link in the dashboard sidebar: You should see the Dashboard Settings page, with both layouts still applied.

Explanation of the Example:

Root Layout: The app/layout.js provides the basic HTML structure, navigation, and footer for the entire application.
Dashboard Layout: The app/dashboard/layout.js provides a specific layout for the dashboard section, including a sidebar navigation.
Nested Layouts: The Dashboard pages (/dashboard and /dashboard/settings) are wrapped by both the root layout and the dashboard layout, demonstrating nested layouts.
Linking: The <Link> component is used to navigate between pages, providing client-side routing.

By following these steps and the example, you can create and structure layouts and pages in your Next.js application effectively. Remember to organize your files within the app directory to leverage Next.js's file-system routing.

PreviousLesson 2: How to set up a new Next.js project NextHands-on Practice 1

Last updated 9 months ago