Next.js components and layouts provide developers with powerful tools to help build modular and maintainable web applications.
| Feature | Description |
| --- | --- |
| **Components** | Page components, UI components, and functional components for building various parts of the application. |
| **Layouts** | Global layouts, nested layouts, and dynamic layouts for defining page structure and common elements. |
| **Special Files (Old Version)** | `_app.js`, `_document.js`, `_error.js` for defining global layouts and document structure. |
In Next.js 13, the `app` directory replaces the traditional `pages` directory for managing routes and page structure. The `app` directory introduces more flexible layout, routing, and data fetching mechanisms, along with enhanced parallel rendering capabilities.
`app` directory structure example:
├── app/│ ├── page.js # Default home page│ ├── about/│ │ ├── page.js # About page│ └── layout.js # Root layout└── public/ # Static files directory
* * *
## Components
Components are the basic building blocks of a Next.js application. They can be page components, UI components, or functional components.
In Next.js, all pages and layouts are essentially React components. You can create and use components just like in any React application.
### Page Components
Page components are the foundation of routing in Next.js, with each page component corresponding to a route.
Page components are typically stored in the `app` or `pages` directory.
## Example
// pages/about.js or app/about/page.js
export default function About(){
return
About Page
;
}
### UI Components
UI components are reusable interface elements, such as buttons, cards, navigation bars, etc.
UI components are typically stored in the `components` directory.
## Example
// components/Button.js
export default function Button({ children }){
return;
}
### Functional Components
Functional components are components that implement specific functionality, such as data fetching, state management, etc.
Functional components are typically stored in the `hooks` or `utils` directory.
## Example
// hooks/useData.js
import{ useEffect, useState } from 'react';
export default function useData(url){
const[data, setData]= useState(null);
useEffect(()=>{
fetch(url)
.then((res)=> res.json())
.then((data)=> setData(data));
},);
return data;
}
### Example
**Creating a component:** Create `Hello.js` in the `app/components/` directory with the following code:
## Example
// app/components/Hello.js
const Hello =()=>{
return
Hello, Next.js 13!
;
};
export default Hello;
**Using the component:** In the `app` directory, page components are exported from `page.js`, where you can use the component:
## Example
// app/page.js
import Hello from './components/Hello';
export default function Home(){
return(
);
}
* * *
## Layouts
Layouts are components used to define page structure, typically containing common elements such as headers, footer, navigation bar, etc.
### Global Layout
Global layouts apply to the entire application, usually defined in `app/layout.js` or `_app.js`.
## Example
// pages/_app.js or app/layout.js
import Header from '../components/Header';
import Footer from '../components/Footer';
export default function Layout({ children }){
return(
{children}
);
}
* * *
### Nested Layouts
Nested layouts allow defining different layouts for different route segments.
In the `app` directory, each route segment can contain a `layout.js` file.
app/├── layout.js // Root layout├── about/│ ├── layout.js // /about layout│ └── page.js // /about page└── dashboard/ ├── layout.js // /dashboard layout └── page.js // /dashboard page
## Example
// app/dashboard/layout.js
export default function DashboardLayout({ children }){
return(
Dashboard Layout
{children}
);
}
### Dynamic Layouts
Dynamic layouts allow selecting layouts dynamically based on conditions.
## Example
// app/layout.js
export default function Layout({ children, isDashboard }){
return(
{isDashboard ?{children}:{children}}
);
}
* * *
## Special Files (Old Version)
Next.js provides some special files for defining global layouts, document structure, and error pages.
### _app.js
`_app.js` is the global component in Next.js, used to wrap all page components.
## Example
// pages/_app.js
import Layout from '../components/Layout';
export default function MyApp({ Component, pageProps }){
return(
);
}
### _document.js
`_document.js` is used to customize the HTML document structure.
## Example
// pages/_document.js
import{ Html, Head, Main, NextScript } from 'next/document';
export default function Document(){
return(
);
}
### _error.js
`_error.js` is used to customize error pages.
## Example
// pages/_error.js
export default function Error({ statusCode }){
return(
YouTip