Next.js Components and Layout
Next.js's components and layout features provide developers with powerful tools to help build modular, maintainable web applications.
| Feature | Description |
|---|---|
| Components | Page components, UI components, and feature components, used to build various parts of the application. |
| Layout | Global layout, nested layout, dynamic layout, used to define page structure and common elements. |
| Special Files (Legacy Version) | _app.js、_document.js、_error.jsUsed to define the global layout 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, data fetching mechanisms, and enhanced parallel rendering capabilities.
Example of app directory structure:
├── app/ │ ├── page.js # 默认首页 │ ├── about/ │ │ ├── page.js # About 页 │ └── layout.js # 根布局 └── public/ # 静态文件目录
Components
Components are the basic building blocks of Next.js applications. They can be page components, UI components, or feature components.
In Next.js, all pages and layouts are essentially React components. You can create and use components just as you would in any React application.
Page Components
Page components are the foundation of routing in Next.js; each page component corresponds to a route.
Page components are usually stored in the app or pages directory.
Example
export default function About() {
return <div>About Page</div>;
}
UI Components
UI components are reusable interface elements, such as buttons, cards, navigation bars, etc.
UI components are usually stored in the components directory.
Example
export default function Button({ children }) {
return <button>{children}</button>;
}
Feature Components
Feature components are components that implement specific features, such as data fetching, state management, etc.
Feature components are usually stored in the hooks or utils directory.
Example
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));
}, [url]);
return data;
}
Example
Creating a component:Create Hello.js in the app/components/ directory, with the following code:
Example
const Hello = () => {
return <h1>Hello, Next.js 13!</h1>;
};
export default Hello;
Using the component:In the app directory, page components are exported from page.js, and you can use components within them:
Example
import Hello from './components/Hello';
export default function Home() {
return (
<div>
<Hello />
</div>
);
}
Layout
Layouts are components used to define page structure, usually containing common elements such as headers, footers, navigation bars, etc.
Global Layout
Global layouts apply to the entire application and are usually defined in app/layout.js or _app.js.
Example
import Header from '../components/Header';
import Footer from '../components/Footer';
export default function Layout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
<Footer />
</div>
);
}
Nested Layout
Nested layouts allow you to define different layouts for different route segments.
In the app directory, each route segment can contain a layout.js file.
app/
├── layout.js // 根布局
├── about/
│ ├── layout.js // /about 的布局
│ └── page.js // /about 页面
└── dashboard/
├── layout.js // /dashboard 的布局
└── page.js // /dashboard 页面
Example
export default function DashboardLayout({ children }) {
return (
<div>
<h1>Dashboard Layout</h1>
{children}
</div>
);
}
Dynamic Layout
Dynamic layouts allow you to dynamically select a layout based on conditions.
Example
export default function Layout({ children, isDashboard }) {
return (
<div>
{isDashboard ? <DashboardLayout>{children}</DashboardLayout> : <MainLayout>{children}</MainLayout>}
</div>
);
}
Special Files (Legacy 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
import Layout from '../components/Layout';
export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
_document.js
_document.js is used to customize the HTML document structure.
Example
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
_error.js
_error.js is used to customize error pages.
Example
export default function Error({ statusCode }) {
return (
<div>
<h1>{statusCode} Error</h1>
<p>Sorry, something went wrong.</p>
</div>
);
}