next.js 中文文档

主题

TypeScript ​

Next.js 提供了以 TypeScript 为首选的开发体验，用于构建您的 React 应用程序。

它内置了 TypeScript 支持，可以自动安装必要的包并配置适当的设置。

新项目 ​

create-next-app 默认带有 TypeScript。

bash
npx create-next-app@latest

现有项目 ​

通过将文件重命名为 .ts / .tsx 将 TypeScript 添加到您的项目中。运行 next dev 和 next build 以自动安装必要的依赖项，并添加一个带有推荐配置选项的 tsconfig.json 文件。

如果您已经有 jsconfig.json 文件，请将旧的 jsconfig.json 中的 paths 编译器选项复制到新的 tsconfig.json 文件中，并删除旧的 jsconfig.json 文件。

最低 TypeScript 版本 ​

强烈建议至少使用 TypeScript v4.5.2 版本，以获得诸如 import 名称上的类型修饰符 和 性能改进 等语法特性。

路径别名和baseUrl ​

Next.js自动支持tsconfig.json中的"paths"和"baseUrl"选项。

类型检查next.config.js ​

next.config.js文件必须是一个JavaScript文件，因为它不会被Babel或TypeScript解析，但您可以在IDE中使用JSDoc添加一些类型检查，如下所示：

js
// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* 配置选项在这里 */
}

module.exports = nextConfig

增量类型检查 ​

自v10.2.1起，Next.js在您的tsconfig.json中启用时支持增量类型检查，这可以帮助加快大型应用程序中的类型检查速度。

忽略 TypeScript 错误 ​

当项目中存在 TypeScript 错误时，Next.js 会使您的 生产构建 (next build) 失败。

如果您希望即使应用程序存在错误，Next.js 也能危险地生成生产代码，您可以禁用内置的类型检查步骤。

如果禁用了，请确保您在构建或部署过程中运行类型检查，否则这可能非常危险。

打开 next.config.js 并启用 typescript 配置中的 ignoreBuildErrors 选项：

js
module.exports = {
  typescript: {
    // !! 警告 !!
    // 危险地允许即使项目有类型错误，生产构建也能成功完成。
    // !! 警告 !!
    ignoreBuildErrors: true,
  },
}

自定义类型声明 ​

当您需要声明自定义类型时，可能会想要修改 next-env.d.ts。然而，此文件是自动生成的，因此您所做的任何更改都将被覆盖。相反，您应该创建一个新文件，我们称之为 new-types.d.ts，并在您的 tsconfig.json 中引用它：

json
{
  "compilerOptions": {
    "skipLibCheck": true
    //...已省略...
  },
  "include": [
    "new-types.d.ts",
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

版本变更 ​

版本变更
v13.2.0静态类型链接在 beta 版本中可用。
v12.0.0SWC 现在默认用于编译 TypeScript 和 TSX，以实现更快的构建。
v10.2.1当在您的 tsconfig.json 中启用时，添加了 增量类型检查 支持。