update: typescript.md

hiro08gh · hiro08gh · commit 0f73d6456254 · 2022-03-12T09:37:03.000+09:00
diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md
@@ -5,32 +5,57 @@ description: Next.jsは標準でTypeScriptをサポートし、ページとAPI
 # TypeScript
 
 <details>
-  <summary><b>例</b></summary>
-  <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-typescript">TypeScript</a></li>
-  </ul>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                                                                                                                              |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `v12.0.0` | [SWC](https://nextjs.org/docs/advanced-features/compiler) is now used by default to compile TypeScript and TSX for faster builds.    |
+| `v10.2.1` | [Incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) support added when enabled in your `tsconfig.json`. |
+
 </details>
 
 Next.js は、IDE のように統合された革新的な[TypeScript](https://www.typescriptlang.org/)体験を提供します。
 
-はじめに、プロジェクトのルートに空の `tsconfig.json` ファイルを作成します:
+Next.js provides an integrated [TypeScript](https://www.typescriptlang.org/) experience, including zero-configuration set up and built-in types for Pages, APIs, and more.
+
+- [Clone and deploy the TypeScript starter](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-typescript&project-name=with-typescript&repository-name=with-typescript)
+- [View an example application](https://github.com/vercel/next.js/tree/canary/examples/with-typescript)
+
+## `create-next-app` support
+
+You can create a TypeScript project with [`create-next-app`](https://nextjs.org/docs/api-reference/create-next-app) using the `--ts, --typescript` flag like so:
+
+```
+npx create-next-app@latest --ts
+# or
+yarn create next-app --typescript
+```
+
+## Existing projects
+
+To get started in an existing project, create an empty `tsconfig.json` file in
+the root folder:
 
 ```bash
 touch tsconfig.json
 ```
 
 Next.js はこのファイルをデフォルト値で自動的に構成します。独自の `tsconfig.json` カスタム[コンパイラオプション](https://www.typescriptlang.org/docs/handbook/compiler-options.html)を提供することもサポートされています。
 
-> Next.jsはTypeScriptを処理するためにBabelを用いますが、いくつかの[注意点](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats)があり、一部の[コンパイラオプションの挙動が異なります](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options)。
+You can also provide a relative path to a tsconfig.json file by setting `typescript.tsconfigPath` prop inside your `next.config.js` file.
+
+Starting in `v12.0.0`, Next.js uses [SWC](https://nextjs.org/docs/advanced-features/compiler) by default to compile TypeScript and TSX for faster builds.
+
+> Next.js は `.babelrc` が存在する場合、 TypeScript を処理するために Babel を用いますが、これはいくつかの[注意点](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats)があり、一部の[コンパイラオプションの挙動が異なります](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options)。
 
-次に、`next`（通常は `npm run dev`）を実行すると、セットアップのために Next.js が必要なパッケージのインストールを案内します:
+次に、`next`（通常は `npm run dev` or `yarn dev`）を実行すると、セットアップのために Next.js が必要なパッケージのインストールを案内します:
 
 ```bash
 npm run dev
 
 # 次のような指示が表示されます:
 #
-# Please install typescript, @types/react, and @types/node by running:
+# Please install TypeScript, @types/react, and @types/node by running:
 #
 #         yarn add --dev typescript @types/react @types/node
 #
@@ -39,12 +64,13 @@ npm run dev
 
 これで、ファイルを `.js` から `.tsx` に変換し、TypeScript の利点を活用する準備が整いました！
 
-> `next-env.d.ts`という名前のファイルがプロジェクトのルートに作成されます。
-> このファイルにより、TypeScriptコンパイラによってNext.jsの型が確実に取得されます。このファイルを**削除することはできません**が、編集することはできます（ただし、必須ではありません）。
+> `next-env.d.ts`という名前のファイルがプロジェクトのルートに作成されます。このファイルにより、TypeScriptコンパイラによってNext.jsの型が確実に取得されます。このファイルをいつでも変更される可能性があるため、**削除または編集することができません**。
 
-> Next.jsでは `strict` モードはデフォルトでオフになっています。TypeScriptに慣れてきたら `tsconfig.json` でオンにすることをお勧めします。
+> TypeScript の `strict` モードはデフォルトでオフになっています。TypeScriptに慣れてきたら `tsconfig.json` でオンにすることをお勧めします。
 
-デフォルトでは、Next.js はアクティブに開発に取り組んでいるページに対して TypeScript のエラーを報告します。アクティブでないページに対する TypeScript のエラーは開発工程を邪魔**しません**。
+By default, Next.js will do type checking as part of `next build`. We recommend using code editor type checking during development.
+
+> Instead of editing `next-env.d.ts`, you can include additional types by adding a new file e.g. `additional.d.ts` and then referencing it in the [`include`](https://www.typescriptlang.org/tsconfig#include) array in your `tsconfig.json`.
 
 エラー報告を静かにさせたい場合は、[TypeScriptのエラーを無視する](/docs/api-reference/next.config.js/ignoring-typescript-errors.md)ためのドキュメントを参照してください。
 
@@ -56,27 +82,27 @@ npm run dev
 ```ts
 import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next';
 
-export const getStaticProps: GetStaticProps = async context => {
+export const getStaticProps: GetStaticProps = async (context) => {
   // ...
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
   // ...
 };
 
-export const getServerSideProps: GetServerSideProps = async context => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   // ...
 };
 ```
 
-> `getInitialProps`を使用している場合は、[このページの指示に従って](/docs/api-reference/data-fetching/getInitialProps.md#typescript)ください。
+> `getInitialProps`を使用している場合は、[このページの指示に従って](/docs/api-reference/data-fetching/get-initial-props.md#typescript)ください。
 
 ## APIのルート
 
 以下は、API ルートにビルトインの型を使用する方法の例です:
 
 ```ts
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default (req: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ name: 'John Doe' });
@@ -86,29 +112,27 @@ export default (req: NextApiRequest, res: NextApiResponse) => {
 レスポンスデータにも型を指定できます:
 
 ```ts
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next'
 
 type Data = {
-  name: string;
-};
+  name: string
+}
 
 export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
-  res.status(200).json({ name: 'John Doe' });
-};
+  res.status(200).json({ name: 'John Doe' })
+}
 ```
 
 ## カスタム `App`
 
-[カスタム `App` ](/docs/advanced-features/custom-app)がある場合は、ビルトインの `AppProps` 型を使用して、ファイル名を `./pages/_app.tsx` に変更できます:
+[カスタム `App` ](/docs/advanced-features/custom-app.md)がある場合は、ビルトインの `AppProps` 型を使用して、ファイル名を `./pages/_app.tsx` に変更できます:
 
 ```ts
-import { AppProps } from 'next/app';
+import type { AppProps } from 'next/app'
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
 }
-
-export default MyApp;
 ```
 
 ## PathのエイリアスとbaseUrl
@@ -117,3 +141,47 @@ Next.js は、`tsconfig.json`の `"paths"` および `"baseUrl"` オプション
 
 この機能の詳細については、[モジュールパスエイリアスのドキュメント](/docs/advanced-features/module-path-aliases.md)をご覧ください。
 
+## Type checking next.config.js
+
+The `next.config.js` file must be a JavaScript file as it does not get parsed by Babel or TypeScript, however you can add some type checking in your IDE using JSDoc as below:
+
+```js
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  /* config options here */
+}
+
+module.exports = nextConfig
+```
+
+## Incremental type checking
+
+Since `v10.2.1` Next.js supports [incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) when enabled in your `tsconfig.json`, this can help speed up type checking in larger applications.
+
+It is highly recommended to be on at least `v4.3.2` of TypeScript to experience the [best performance](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3/#lazier-incremental) when leveraging this feature.
+
+## Ignoring TypeScript Errors
+
+Next.js fails your **production build** (`next build`) when TypeScript errors are present in your project.
+
+If you'd like Next.js to dangerously produce production code even when your application has errors, you can disable the built-in type checking step.
+
+If disabled, be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous.
+
+Open `next.config.js` and enable the `ignoreBuildErrors` option in the `typescript` config:
+
+```js
+module.exports = {
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+}
+```
