Nextjs 基础知识

Next.js 是一个基于 React 的开源框架，支持服务器端渲染（SSR）、静态站点生成（SSG）和客户端导航，用于构建高性能的 Web 应用。 以下是其核心基础知识：

• 框架：提供预构建的代码结构，定义应用架构、行为和功能（如 Next.js），强制遵循其流程和结构。
• 库：可重用的代码模块集合（如 React），开发者按需导入使用，不规定整体流程。

使用命令行快速初始化项目：

• 这会在 my-next-app 目录下生成包含默认配置的 Next.js 项目。
• 支持 TypeScript：创建时添加 --typescript 标志即可启用类型检查。

Next.js 采用约定优于配置的目录规则：

• pages/：核心路由目录，每个文件对应一条路由。

  例如：pages/index.js → 主页（/）；pages/about.js → /about。

• public/：静态资源目录（如图片、字体）。
• styles/：全局样式文件（如 globals.css）。
• components/（自定义）：存放可复用的 React 组件。

Next.js 的路由基于文件系统，无需手动配置：

• 示例：pages/index.js 定义主页内容。const HomePage = () => { return <div>欢迎来到 Next.js 基础教程！</div>;};export default HomePage;
• 动态路由：通过方括号命名文件实现（如 pages/posts/[id].js 对应 /posts/1）。
• 嵌套路由：创建同名文件夹（如 pages/dashboard/settings.js 对应 /dashboard/settings）。

• 服务器端渲染（SSR）：

  页面在服务器端生成 HTML，适合需要实时数据或 SEO 优先的场景。

  使用 getServerSideProps 函数获取数据。

  export async function getServerSideProps() { const data = await fetchData(); return { props: { data } };}
• 静态站点生成（SSG）：

  页面在构建时生成 HTML，适合内容变化少的站点（如博客）。

  使用 getStaticProps 和 getStaticPaths 函数。

  export async function getStaticProps() { const data = await fetchStaticData(); return { props: { data }, revalidate: 10 }; // ISR 增量静态再生}
• 客户端渲染（CSR）：

  页面在客户端通过 JavaScript 动态渲染，适合交互密集型应用。

• getServerSideProps：每次请求时在服务器端运行，返回数据作为 props。
• getStaticProps：构建时运行，返回静态数据（可配合 revalidate 实现增量更新）。
• getStaticPaths：为动态路由预生成页面路径。
• SWR/React Query：客户端数据获取库，适用于需要频繁更新的场景。

• CSS Modules：通过 [name].module.css 文件实现局部作用域样式。
• Sass/Less：支持预处理器，需安装对应依赖（如 sass）。
• Styled-JSX：内置的 CSS-in-JS 方案，支持作用域样式。
• 全局样式：在 _app.js 中导入 globals.css。

在 pages/api/ 目录下创建后端接口：

• 示例：pages/api/hello.jsexport default function handler(req, res) { res.status(200).json({ name: 'Next.js API' });}
• 访问路径：/api/hello，无需额外服务器配置。

• 部署平台：Vercel（官方推荐）、Netlify、AWS 等。
• 性能优化：

  图片优化：使用 next/image 组件自动压缩和懒加载。

  代码分割：按路由自动拆分 JavaScript 包。

  缓存策略：SSG 页面可设置 revalidate 实现增量更新。

• 支持 TypeScript 吗？

  是的，Next.js 内置 TypeScript 支持，创建项目时添加 --typescript 标志即可。

• 如何添加全局布局？

  修改 pages/_app.js 文件，包裹 Component 属性实现共享布局。

• 如何处理 404 页面？

  创建 pages/404.js 文件自定义错误页面。

Next.js 通过约定式路由、多种渲染模式和丰富的功能（如 API 路由、数据获取），简化了高性能 Web 应用的开发流程。掌握 SSR/SSG 的区别、项目结构和数据获取方法，是高效使用 Next.js 的关键。进一步探索其进阶特性（如中间件、国际化），可提升开发效率和应用质量。