> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/backend-frameworks-next.js/lesson-3-how-to-create-layouts-and-pages.md).
# 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
```jsx
// app/about/page.jsx
import React from 'react';
function AboutPage() {
return (
About Us
This is the about page.
);
}
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
```jsx
// app/layout.jsx (Root layout)
import React from 'react';
import './globals.css'; // Import global styles
function RootLayout({ children }) {
return (
My App{children} {/* Render the page content */}
);
}
export default RootLayout;
```
JavaScript
```jsx
// app/dashboard/layout.jsx (Dashboard layout)
import React from 'react';
function DashboardLayout({ children }) {
return (
{children} {/* Render the page content */}
);
}
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 ``, ``, and `` 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 `` component from `next/link` for client-side navigation between pages.
* Using `` is important for performance and accessibility. It prevents full page reloads and provides a smoother user experience.
* **Example:**
JavaScript
```jsx
import React from 'react';
import Link from 'next/link';
function HomePage() {
return (
Welcome to My Next.js App!
Go to the About Page
Go to the Dashboard
);
}
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
```jsx
// 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 (
My App{children}
);
}
export default RootLayout;
```
JavaScript
```jsx
// app/page.jsx (Home page)
import React from 'react';
import Link from 'next/link';
function HomePage() {
return (
);
}
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 **``** 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.