From 740987b498132128b916b6c6d4c2fe06d3272af5 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 30 Jan 2020 09:26:47 -0800 Subject: [PATCH 1/5] TypeScript documentation for _app.tsx --- docs/advanced-features/custom-app.md | 5 +++++ docs/basic-features/typescript.md | 14 ++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md index df41c6f12adb942..6c388f8db236107 100644 --- a/docs/advanced-features/custom-app.md +++ b/docs/advanced-features/custom-app.md @@ -10,6 +10,7 @@ Next.js uses the `App` component to initialize pages. You can override it and co - Keeping state when navigating pages - Custom error handling using `componentDidCatch` - Inject additional data into pages +- [Add global CSS](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) To override the default `App`, create the file `./pages/_app.js` as shown below: @@ -41,6 +42,10 @@ The `Component` prop is the active `page`, so whenever you navigate between rout > Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md). +### TypeScript + +If you’re using TypeScript, take a look at [our TypeScript documentation](/docs/basic-features/typescript#custom-app). + ## Related For more information on what to do next, we recommend the following sections: diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index f0f9a6d4700c70c..a890090592e4d49 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -118,3 +118,17 @@ export default (req: NextApiRequest, res: NextApiResponse) => { res.status(200).json({ name: 'John Doe' }) } ``` + +## Custom `App` using `_app.tsx` + +If you’d like to [customize the `App` component](https://nextjs.org/docs/advanced-features/custom-app) in TypeScript, create `pages/_app.tsx`: + +```ts +import { AppProps } from 'next/app' + +function MyApp({ Component, pageProps }: AppProps) { + return +} + +export default MyApp +``` From 359184996ecedd1b71d1f59c1dcfd5364dbae6dd Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 30 Jan 2020 09:27:38 -0800 Subject: [PATCH 2/5] Use relative URL --- docs/advanced-features/custom-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md index 6c388f8db236107..1eba8e6fec1c714 100644 --- a/docs/advanced-features/custom-app.md +++ b/docs/advanced-features/custom-app.md @@ -10,7 +10,7 @@ Next.js uses the `App` component to initialize pages. You can override it and co - Keeping state when navigating pages - Custom error handling using `componentDidCatch` - Inject additional data into pages -- [Add global CSS](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) +- [Add global CSS](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) To override the default `App`, create the file `./pages/_app.js` as shown below: From 004682ba0a266d3c614a1ac4b008ad45e74385f2 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 30 Jan 2020 09:27:57 -0800 Subject: [PATCH 3/5] Use relative URL --- docs/basic-features/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index a890090592e4d49..6bf9f1e962a6e45 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -121,7 +121,7 @@ export default (req: NextApiRequest, res: NextApiResponse) => { ## Custom `App` using `_app.tsx` -If you’d like to [customize the `App` component](https://nextjs.org/docs/advanced-features/custom-app) in TypeScript, create `pages/_app.tsx`: +If you’d like to [customize the `App` component](/docs/advanced-features/custom-app) in TypeScript, create `pages/_app.tsx`: ```ts import { AppProps } from 'next/app' From 26ecfcd48b0f66f413349e3834ef75571ca0412e Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 30 Jan 2020 12:24:09 -0800 Subject: [PATCH 4/5] Update docs/basic-features/typescript.md Co-Authored-By: Luis Alvarez D. --- docs/basic-features/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index 6bf9f1e962a6e45..f8f7e146f6350ca 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -119,7 +119,7 @@ export default (req: NextApiRequest, res: NextApiResponse) => { } ``` -## Custom `App` using `_app.tsx` +## Custom `App` If you’d like to [customize the `App` component](/docs/advanced-features/custom-app) in TypeScript, create `pages/_app.tsx`: From 5ac68ecc791bcd2abcc198ddf1b232c6c45619c5 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Thu, 30 Jan 2020 12:24:23 -0800 Subject: [PATCH 5/5] Update docs/basic-features/typescript.md Co-Authored-By: Luis Alvarez D. --- docs/basic-features/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md index f8f7e146f6350ca..6abba785392c211 100644 --- a/docs/basic-features/typescript.md +++ b/docs/basic-features/typescript.md @@ -121,7 +121,7 @@ export default (req: NextApiRequest, res: NextApiResponse) => { ## Custom `App` -If you’d like to [customize the `App` component](/docs/advanced-features/custom-app) in TypeScript, create `pages/_app.tsx`: +If you have a [custom `App` ](/docs/advanced-features/custom-app), you can use the built-in type `AppProps`, like so: ```ts import { AppProps } from 'next/app'