Next.js 知识点
🧩 一、核心特性与优势
- 服务器端渲染（SSR）
页面在每次请求时由服务器实时生成HTML，提升首屏加载速度与SEO效果（适合动态内容页）。 - 静态站点生成（SSG）
构建时预渲染页面为静态HTML，适合内容稳定的页面（如博客、文档），访问速度极快且支持CDN缓存。 - 混合渲染模式
支持按页面选择SSR/SSG，灵活平衡性能与实时性需求。
📂 二、项目结构与约定
-
目录规范
• pages/：文件自动映射为路由（如 pages/about.js → /about）。• public/：存放静态资源（图片、字体），通过 /logo.png 直接访问。
• components/：可复用UI组件（非强制，但推荐）。
• pages/api/：API路由文件，处理后端逻辑（如 pages/api/user.js → /api/user）。
-
关键配置文件
• next.config.js：自定义Webpack、环境变量等。• _app.js：全局布局与状态管理（如注入Redux）。
• _document.js：自定义HTML文档结构。
🚦 三、路由系统详解
-
动态路由
• 文件命名：pages/posts/[id].js 匹配 /posts/123，通过 useParams() 获取 id 参数。• 高级匹配：[…slug].js 捕获多级路径（如 /docs/a/b → slug: [“a”, “b”]）。
-
导航组件
使用 实现客户端无刷新跳转，优化SPA体验。 -
嵌套路由
通过目录层级实现（如 app/dashboard/settings/page.js → /dashboard/settings）。
📡 四、数据获取策略
-
SSG数据预取
export async function getStaticProps() {
const res = await fetch(‘https://api.example.com/data’);
return { props: { data } }; // 构建时注入组件
}适用于内容更新频率低的页面。
-
SSR实时数据
export async function getServerSideProps() {
const res = await fetch(‘https://api.example.com/live-data’);
return { props: { data } }; // 每次请求时执行
}适合实时数据（如股票行情）。
🎨 五、样式管理方案
- CSS Modules
默认支持，文件名格式：Component.module.css，避免类名冲突。 - CSS-in-JS
集成Styled-Components/Emotion，需配置 next.config.js。 - Tailwind CSS
推荐使用：npx install tailwindcss postcss autoprefixer 快速配置。
⚡ 六、性能优化技巧
-
代码分割（Code Splitting）
自动按页面拆分JS包，减少首屏负载。 -
动态导入（Lazy Loading）
const HeavyComponent = dynamic(() => import(‘…/components/HeavyComponent’));延迟加载非关键组件。
-
图片优化
使用 组件自动压缩、懒加载、WebP格式转换。
🔌 七、API路由实践
在 pages/api/ 下创建Node.js风格的接口：
export default function handler(req, res) {
res.status(200).json({ message: ‘Hello from Next.js API!’ });
}
可直接处理数据库查询、身份验证等后端逻辑。
⚙️ 八、配置与环境变量
-
环境变量
• .env.local：定义敏感变量（如 API_KEY=secret），通过 process.env.API_KEY 读取。• 客户端公开变量需加前缀 NEXT_PUBLIC_（如 NEXT_PUBLIC_ANALYTICS_ID）。
🚀 九、部署流程
- Vercel（官方平台）
支持一键部署，自动识别Next.js配置，内置CDN与HTTPS。 - Node服务器部署
构建命令：npm run build，启动生产服务器：npm start。
💎 总结
Next.js通过约定优于配置的设计，显著降低了React应用的复杂度，尤其擅长解决SSR/SSG、路由、性能优化等痛点。掌握以上核心知识点后，可高效构建高性能、易维护的全栈应用。建议结合https://nextjs.org/learn深化实践。