From df57a09e58469714b6dc671d8fae1536e8192676 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 22 Feb 2022 10:17:01 -0600 Subject: [PATCH 1/3] Improve TypeScript documentation. --- docs/basic-features/typescript.md | 58 +++++++++++++++++++------------ 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index db23d29dad07..3dbe8af64dc3 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -5,14 +5,19 @@ description: Next.js supports TypeScript by default and has built-in types for p # TypeScript
- Examples - + Version History + +| 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`. | +
-Next.js provides an integrated [TypeScript](https://www.typescriptlang.org/) -experience out of the box, similar to an IDE. +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 @@ -120,26 +125,11 @@ export default (req: NextApiRequest, res: NextApiResponse) => { If you have a [custom `App`](/docs/advanced-features/custom-app.md), you can use the built-in type `AppProps` and change file name to `./pages/_app.tsx` like so: ```ts -// import App from "next/app"; -import type { AppProps /*, AppContext */ } from 'next/app' +import type { AppProps } from 'next/app' -function MyApp({ Component, pageProps }: AppProps) { +export default function MyApp({ Component, pageProps }: AppProps) { return } - -// 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 ``` ## Path aliases and baseUrl @@ -170,3 +160,25 @@ module.exports = nextConfig 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. + +> 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, + }, +} +``` From 81885c4a88805ff40968282371a1738c110ce496 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 22 Feb 2022 10:33:49 -0600 Subject: [PATCH 2/3] Remove !! WARN !! as we already say dangerously --- docs/api-reference/next.config.js/ignoring-typescript-errors.md | 2 -- docs/basic-features/typescript.md | 2 -- 2 files changed, 4 deletions(-) diff --git a/docs/api-reference/next.config.js/ignoring-typescript-errors.md b/docs/api-reference/next.config.js/ignoring-typescript-errors.md index 57335b30cf8c..d94f5087d5a3 100644 --- a/docs/api-reference/next.config.js/ignoring-typescript-errors.md +++ b/docs/api-reference/next.config.js/ignoring-typescript-errors.md @@ -15,10 +15,8 @@ Open `next.config.js` and enable the `ignoreBuildErrors` option in the `typescri ```js module.exports = { typescript: { - // !! WARN !! // Dangerously allow production builds to successfully complete even if // your project has type errors. - // !! WARN !! ignoreBuildErrors: true, }, } diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index 3dbe8af64dc3..194f3e563543 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -174,10 +174,8 @@ Open `next.config.js` and enable the `ignoreBuildErrors` option in the `typescri ```js module.exports = { typescript: { - // !! WARN !! // Dangerously allow production builds to successfully complete even if // your project has type errors. - // !! WARN !! ignoreBuildErrors: true, }, } From 02e4c8c653671716f3bc7e511168e59517938e72 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sat, 26 Feb 2022 11:52:03 -0600 Subject: [PATCH 3/3] Re-add warn because we do want to warn --- .../next.config.js/ignoring-typescript-errors.md | 4 +++- docs/basic-features/typescript.md | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/api-reference/next.config.js/ignoring-typescript-errors.md b/docs/api-reference/next.config.js/ignoring-typescript-errors.md index d94f5087d5a3..a26cbc26cbc8 100644 --- a/docs/api-reference/next.config.js/ignoring-typescript-errors.md +++ b/docs/api-reference/next.config.js/ignoring-typescript-errors.md @@ -8,15 +8,17 @@ Next.js fails your **production build** (`next build`) when TypeScript errors ar 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. -> Be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous. +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, }, } diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index 194f3e563543..9869dc850e43 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -167,15 +167,17 @@ Next.js fails your **production build** (`next build`) when TypeScript errors ar 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. -> Be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous. +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, }, }