返回

Next.js v4.1.4 文档中文翻译

前端

## 认识 Next.js

Next.js 是一个极简的服务端渲染框架，用于构建 React 应用。它提供了一些开箱即用的特性，可以帮助你快速开发出高性能、可扩展的 React 应用。这些特性包括：

  • 零配置：Next.js 开箱即用，无需任何配置。
  • 服务器端渲染：Next.js 可以将你的 React 应用渲染成静态 HTML，从而提高性能并实现更好的 SEO。
  • 按需加载组件：Next.js 可以按需加载组件，从而减少初始加载时间并提高性能。
  • 自动代码分割：Next.js 可以自动将你的代码分割成更小的块，从而减少初始加载时间并提高性能。
  • 预渲染：Next.js 可以预渲染你的 React 应用，从而提高初始加载速度。
  • 静态网站生成：Next.js 可以生成静态网站，从而提高性能并实现更好的 SEO。
  • 自定义路由：Next.js 可以让你自定义路由，从而更灵活地组织你的应用。
  • 构建工具：Next.js 提供了一些构建工具，可以帮助你开发、构建和部署你的 React 应用。
  • 国际化支持：Next.js 提供了国际化支持，可以帮助你构建支持多语言的 React 应用。
  • 类型检查支持：Next.js 提供了类型检查支持，可以帮助你发现代码中的错误并提高代码质量。

## 安装和使用

要安装 Next.js，你可以使用以下命令：

npm install next

安装完成后，你可以使用以下命令创建一个新的 Next.js 项目：

npx create-next-app my-app

创建一个新的 Next.js 项目后，你可以使用以下命令启动开发服务器：

npm run dev

开发服务器启动后，你可以访问 http://localhost:3000 来查看你的 React 应用。

## 路由

Next.js 使用基于文件的路由系统。每个页面都对应一个单独的文件，文件名为该页面的路由。例如，/pages/index.js 文件对应于 / 路由。

要创建一个新的页面，你可以使用以下命令：

npx next generate page my-page

这将在 pages 目录下创建一个新的文件 my-page.js。

## 数据获取

Next.js 提供了两种数据获取方式：客户端数据获取和服务器端数据获取。

客户端数据获取是在浏览器中进行的，而服务器端数据获取是在服务器上进行的。客户端数据获取通常用于获取不会改变的数据，而服务器端数据获取通常用于获取会改变的数据。

要进行客户端数据获取，你可以使用 useSWR hook。要进行服务器端数据获取，你可以使用 getInitialProps 方法。

## 组件

Next.js 组件是 React 组件，它们可以复用和组合。Next.js 提供了一些内置组件，你也可以创建自己的组件。

要创建一个新的组件，你可以使用以下命令：

npx next generate component my-component

这将在 components 目录下创建一个新的文件 my-component.js。

## CSS

Next.js 支持多种 CSS 预处理器，包括 Sass、Less 和 Stylus。要使用 CSS 预处理器，你需要在 next.config.js 文件中进行配置。

## 部署

Next.js 可以部署到各种平台，包括 Vercel、Netlify 和 Heroku。要部署你的 Next.js 应用，你可以使用以下命令：

npm run build

这将在 out 目录下生成一个静态网站。你可以将静态网站上传到你的托管平台。

## 结论

Next.js 是一个功能强大且易于使用的服务端渲染框架。它可以帮助你快速开发出高性能、可扩展的 React 应用。如果你正在寻找一个 React 服务端渲染框架，那么 Next.js 是一个不错的选择。