Next.js 的核心概念有哪些？

推荐答案

Next.js 的核心概念包括：

1. 页面（Pages）：Next.js 使用文件系统路由，pages 目录下的每个文件都会自动映射为一个路由。
2. 预渲染（Pre-rendering）：Next.js 支持两种预渲染方式：静态生成（Static Generation）和服务器端渲染（Server-side Rendering）。
3. API 路由（API Routes）：可以在 pages/api 目录下创建 API 路由，用于处理后端逻辑。
4. 动态路由（Dynamic Routing）：支持动态路由，可以通过文件名和参数来定义动态页面。
5. 静态文件服务（Static File Serving）：可以将静态文件放在 public 目录下，直接通过 URL 访问。
6. CSS 支持（CSS Support）：支持多种 CSS 解决方案，包括全局 CSS、CSS Modules 和 styled-jsx。
7. 数据获取（Data Fetching）：提供了多种数据获取方法，如 getStaticProps、getServerSideProps 和 getStaticPaths。
8. 优化（Optimizations）：内置了多种优化功能，如图像优化、代码拆分和自动静态优化。
9. 中间件（Middleware）：支持中间件，可以在请求处理过程中执行自定义逻辑。
10. 国际化（Internationalization）：支持国际化路由和内容本地化。

本题详细解读

页面（Pages）

Next.js 使用文件系统路由，这意味着 pages 目录下的每个文件都会自动映射为一个路由。例如，pages/index.js 对应根路径 /，pages/about.js 对应 /about 路径。

预渲染（Pre-rendering）

Next.js 支持两种预渲染方式：

• 静态生成（Static Generation）：在构建时生成 HTML 页面，适用于内容不经常变化的页面。
• 服务器端渲染（Server-side Rendering）：在每次请求时生成 HTML 页面，适用于内容频繁变化的页面。

API 路由（API Routes）

可以在 pages/api 目录下创建 API 路由，用于处理后端逻辑。这些路由可以直接在客户端通过 /api/ 路径访问。

动态路由（Dynamic Routing）

Next.js 支持动态路由，可以通过文件名和参数来定义动态页面。例如，pages/posts/[id].js 可以匹配 /posts/1、/posts/2 等路径。

静态文件服务（Static File Serving）

可以将静态文件放在 public 目录下，直接通过 URL 访问。例如，public/images/logo.png 可以通过 /images/logo.png 访问。

CSS 支持（CSS Support）

Next.js 支持多种 CSS 解决方案，包括：

• 全局 CSS：可以在 pages/_app.js 中导入全局 CSS 文件。
• CSS Modules：通过 [name].module.css 文件使用 CSS Modules。
• styled-jsx：支持在组件中直接编写 CSS。

数据获取（Data Fetching）

Next.js 提供了多种数据获取方法：

• getStaticProps：在构建时获取数据，适用于静态生成。
• getServerSideProps：在每次请求时获取数据，适用于服务器端渲染。
• getStaticPaths：用于生成动态路由的静态页面。

优化（Optimizations）

Next.js 内置了多种优化功能，包括：

• 图像优化：自动优化图像，减少加载时间。
• 代码拆分：自动拆分代码，按需加载。
• 自动静态优化：自动将页面优化为静态页面。

中间件（Middleware）

Next.js 支持中间件，可以在请求处理过程中执行自定义逻辑。中间件可以用于身份验证、日志记录等场景。

国际化（Internationalization）

Next.js 支持国际化路由和内容本地化。可以通过配置实现多语言支持，自动根据用户的语言偏好显示相应内容。