introduction

• TypeScript

Next.js 提供了一个TypeScript 开发体验,类似于一个IDE …

对create-next-app的支持

你能够创建一个TypeScript 项目(通过create-next-app --ts或者--typescript标志

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

存在的项目

对于存在的项目转换为ts也是非常的简单,创建一个tsconfig.json到顶级目录中

touch tsconfig.json

然后Next.js 将自动使用默认值填充该文件,你还可以在tsconfig.json中自定义编译器参数 …

你能够提供一个到tsconfig.json 文件的相对路径(通过 typescript.tsconfigPath属性到 next.config.js文件中)

Next.js 使用Babel 来处理TypeScript,因此有一些需要注意的事项(https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats) 和一些对编译器参数上处理的不同

然后运行next通常是npm run dev或者yarn dev,next.js 将引导你完成软件包的安装和配置..

npm run dev
# You'll see instructions like these:
#
# Please install TypeScript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

现在我们可以将.js转换为.tsx然后充分利用ts带来的好处 ..

现在我们可以在根目录中创建next-env.d.ts文件,此文件确保TypeScript编辑器选择Next.js 的类型信息,此文件随时可能会改变,因此你不能删除或者编辑此文件 ..

默认情况下,TypeScript的strict模式是关闭的,如果你对Typescript 觉得适应,建议在tsconfig.json中将其开启 ..

除了编辑next-dev.d.ts，你还可以包含一些额外的类型(通过增加一个新的文件,例如additional.d.ts然后再tsconfig.json中的include引用它们 …

默认情况下,Next.js 将再next build阶段进行类型检查,我们建议你在开发过程中使用代码编辑器的类型检查功能 …

如果要关闭错误报告,请参考 忽略 TypeScript 报错 …

静态生成和服务端渲染

你能够分别使用getStaticProps,getStaticPaths或者getServerSideProps

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}
export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}
export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

如果使用的是getInitialProps,则可以查看 这个函数相关的介绍 ..

API 路由

以下是API 路由使用内置类型的示例

import type { NextApiRequest, NextApiResponse } from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
  name: string
}
export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

自定义App

自定义App可以使用内置类型AppProps并将文件名改为./pages/_app.tsx,然后

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//   return { ...appProps }
// }
export default MyApp

路径别名和baseUrl

Next.js 自动支持tsconfig.json的path以及 baseUrl参数 ..

你可以在模块路径别名了解此功能的贡多信息 …

next.config.js 类型检查

next.config.js必须作为一个js 文件并没有打算让babel或者 typeScript进行解析或者处理,然而你能够增加某些类型检查(在JSDoc中使用) ..

// @ts-check
/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* config options here */
}
module.exports = nextConfig

增量类型检查

从V10.2.1Next.js 支持 incremental type checking (当在<font style="color:rgb(17, 17, 17);">tsconfig.json</font>中启用这个特性),它能够帮助在大型应用中进行类型检查 …