Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）、路由、API 路由等功能，适合构建高性能的现代 Web 应用。以下是 Next.js 的基本用法和实例。
1. 安装 Next.js
首先，确保你已经安装了 Node.js。然后，可以通过以下命令创建一个新的 Next.js 项目：
```bash
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
```
2. 项目结构
一个典型的 Next.js 项目结构如下：
```
my-next-app/
├── pages/
│ ├── index.js
│ ├── _app.js
│ ├── api/
│ │ └── hello.js
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ ├── globals.css
│ └── Home.module.css
├── package.json
└── next.config.js
```
3. 页面和路由
Next.js 使用文件系统路由，`pages` 目录下的文件会自动映射为路由。例如：
-
`pages/index.js` 对应 `/`
-
`pages/about.js` 对应 `/about`
-
`pages/posts/id.js` 对应动态路由 `/posts/1`, `/posts/2` 等
示例：创建首页
```javascript
// pages/index.js
export default function Home() {
return (
<div>
<h1>Welcome to Next.js!</h1>
</div>
);
}
```
示例：创建关于页面
```javascript
// pages/about.js
export default function About() {
return (
<div>
<h1>About Us</h1>
<p>This is the about page.</p>
</div>
);
}
```
4. 动态路由
Next.js 支持动态路由，可以通过文件名中的 `\[\]` 来定义动态路由。
示例：动态路由
```javascript
// pages/posts/id.js
import { useRouter } from 'next/router';
export default function Post() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>Post ID: {id}</h1>
</div>
);
}
```
5. API 路由
Next.js 允许你在 `pages/api` 目录下创建 API 路由，这些路由会作为服务器端 API 端点。
示例：创建 API 端点
```javascript
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello, world!' });
}
```
你可以通过 `/api/hello` 访问这个 API。
6. 静态生成和服务器端渲染
Next.js 支持静态生成（SSG）和服务器端渲染（SSR）。
示例：静态生成
```javascript
// pages/posts/id.js
export async function getStaticPaths() {
const paths = [
{ params: { id: '1' } },
{ params: { id: '2' } },
];
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const post = { id: params.id, title: `Post ${params.id}` };
return { props: { post } };
}
export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
</div>
);
}
```
示例：服务器端渲染
```javascript
// pages/posts/id.js
export async function getServerSideProps({ params }) {
const post = { id: params.id, title: `Post ${params.id}` };
return { props: { post } };
}
export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
</div>
);
}
```
7. 样式
Next.js 支持多种样式方案，包括 CSS Modules、Styled JSX、Tailwind CSS 等。
示例：使用 CSS Modules
```javascript
// pages/index.js
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<h1 className={styles.title}>Welcome to Next.js!</h1>
</div>
);
}
```
```css
/* styles/Home.module.css */
.container {
padding: 20px;
}
.title {
color: blue;
}
```
8. 部署
Next.js 应用可以部署到 Vercel、Netlify 等平台，也可以部署到自己的服务器。
部署到 Vercel
- 安装 Vercel CLI：
```bash
npm install -g vercel
```
- 部署：
```bash
vercel
```
9. 更多功能
Next.js 还支持以下功能：
-
**图像优化**：通过 `next/image` 组件优化图像加载。
-
**国际化**：支持多语言路由。
-
**中间件**：在请求到达页面之前执行代码。
-
**增量静态再生**：在构建后更新静态页面。
10. 参考文档
-
Next.js 官方文档(https://nextjs.org/docs)
-
Next.js GitHub 仓库(https://github.com/vercel/next.js)
通过以上内容，你可以快速上手 Next.js 并开始构建现代 Web 应用。