Next.js 入门指南：构建现代 Web 应用的强大框架
在当今 Web 开发的时代，开发者越来越倾向于使用现代化的工具来提高效率、优化性能并提升用户体验。Next.js，作为一个基于 React 的企业级框架，应运而生。它由 Vercel 团队开发，是目前最受欢迎的 React 全栈解决方案之一。
这篇文章将带你全面了解 Next.js，包括其核心功能、项目结构、数据获取方式、App Router 架构以及常用的部署方式。
一、Next.js 是什么？
Next.js 是一个构建 React 应用的开源框架，提供了以下能力：
• 服务端渲染（SSR）
• 静态生成（SSG）
• 增量静态生成（ISR）
• 文件系统路由
• API 路由
• 图像优化
• 全栈支持（结合后端 API）
• TypeScript 支持
• App Router：全新组件架构支持
Next.js 让你既可以构建前端页面，也能处理服务器逻辑，实现真正的“前后端一体化”开发体验。
二、项目结构
Next.js 支持两种架构：pages/ 和 app/。推荐使用新的 App Router（Next.js 13 起正式引入）。
传统结构（Pages Router）：
pages/
├── index.tsx // 首页：/
├── about.tsx // 关于页：/about
├── blog/[id].tsx // 动态路由：/blog/123
新架构（App Router）：
app/
├── layout.tsx // 全局布局
├── page.tsx // 首页：/
├── about/
│ ├── page.tsx // 关于页：/about
│ └── loading.tsx // 页面加载状态
三、数据获取方式
Next.js 提供三种核心数据获取方法：
1. getStaticProps（静态生成 SSG）
export async function getStaticProps() {
return {
props: {
message: 'Hello Static!',
},
};
}
2. getServerSideProps（服务端渲染 SSR）
export async function getServerSideProps() {
return {
props: {
time: new Date().toISOString(),
},
};
}
3. getStaticPaths（动态静态页面）
用于动态路径静态构建（例如博客文章详情页）。
四、API 路由
你可以在 pages/api 目录下直接创建后端接口：
// pages/api/hello.ts
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from API' });
}
前端可直接请求 /api/hello，不需要单独写后端服务。
五、图像优化
Next.js 内置
import Image from 'next/image';
六、App Router 简介
App Router 是 Next.js 13+ 引入的新架构，支持：
• React Server Components
• 嵌套路由和布局
• loading/error 模块支持
• 客户端组件与服务端组件混用
页面例子：
// app/page.tsx
export default function Home() {
return 欢迎来到 App Router 架构
;
}
布局例子：
// app/layout.tsx
export default function Layout({ children }) {
return (
导航栏
{children}
);
}
七、部署方式
1. ✅ 部署到 Vercel（推荐）
npm i -g vercel
vercel
一键部署，支持 SSR、SSG、ISR，免费绑定域名，无需配置服务器。
2. Docker 容器部署
Dockerfile 文件：
FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
构建镜像：
docker build -t nextjs-app .
docker run -p 3000:3000 nextjs-app
3. Nginx 自部署（搭配 VPS）
项目构建：
npm run build
npm run start
Nginx 配置示例：
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass ;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
八、适用场景
| 应用类型 | 推荐策略 |
|---|---|
| 企业官网 | SSG |
| 博客系统 | ISR + SSG |
| 电商平台 | SSR + API |
| SaaS 应用 | SSR + AppRouter |
| 全栈应用 | App Router + API |
九、总结
Next.js 是目前构建现代 Web 应用最强大也最受欢迎的 React 框架之一，拥有出色的开发体验和丰富的功能栈。无论是做静态站点，还是复杂的动态业务系统，Next.js 都能胜任。
如果你熟悉 React，推荐你立即尝试 App Router 架构；
如果你是全栈开发者，Next.js 将帮助你轻松完成前后端一体化开发！
欢迎点赞、评论、收藏本篇文章！
官方文档：https://nextjs.org