# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reactjs.koida.tech/backend-frameworks-next.js/lesson-3-how-to-create-layouts-and-pages.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.