From 8f7637c8d6f3534958d91c54c43370cd06bd80e5 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:05:14 +0000 Subject: [PATCH] Docs: Address Community Feedback (#60476) Closes: - https://github.com/vercel/feedback/issues/51569 - https://github.com/vercel/feedback/issues/51578 --- .../06-optimizing/09-instrumentation.mdx | 4 ++- errors/css-global.mdx | 25 +++++++++++++++---- errors/opt-out-auto-static-optimization.mdx | 14 +++++------ 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx b/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx index 8348a6227e..9fbf79e1f2 100644 --- a/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx +++ b/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx @@ -5,7 +5,9 @@ description: Learn how to use instrumentation to run code at server startup in y {/* The content of this doc is shared between the app and pages router. You can use the `Content` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */} -If you export a function named `register` from a `instrumentation.ts` (or `.js`) file in the **root directory** of your project (or inside the `src` folder if using one), we will call that function whenever a new Next.js server instance is bootstrapped. +Instrumentation is the process of using code to integrate monitoring and logging tools into your application. This allows you to track the performance and behavior of your application, and to debug issues in production. + +Next.js provides a `register` function that can be exported from a `instrumentation.ts|js` file in the **root directory** of your project (or inside the `src` folder if using one). Next.js will then call `register` whenever a new Next.js server instance is bootstrapped. diff --git a/errors/css-global.mdx b/errors/css-global.mdx index 8f03148dca..95550d5fda 100644 --- a/errors/css-global.mdx +++ b/errors/css-global.mdx @@ -4,15 +4,16 @@ title: 'Global CSS Must Be in Your Custom ``' ## Why This Error Occurred -An attempt to import Global CSS from a file other than [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) was made. +An attempt to import Global CSS from a file outside of [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) was made. -Global CSS cannot be used in files other than your [Custom ``](/docs/pages/building-your-application/routing/custom-app) due to its side-effects and ordering problems. +Global CSS cannot be used in files other than your [custom `_app.js` file](/docs/pages/building-your-application/routing/custom-app) due to ordering problems and side-effects. ## Possible Ways to Fix It -To avoid conflicts, relocate all first-party Global CSS imports to your [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app). +There are two possible ways to fix this error: -Or, [update your component to use local CSS (Component-Level CSS) via CSS Modules](/docs/pages/building-your-application/styling/css-modules). This is the preferred approach. +- Move all global CSS imports to your [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app). +- If you do not wish your stylesheet to be global, update it to use [CSS Modules](/docs/pages/building-your-application/styling/css-modules). This will allow you to import the stylesheet and scope the styles to a specific component. #### Example @@ -28,7 +29,9 @@ body { } ``` -Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](/docs/pages/building-your-application/styling/css-modules). +**Global CSS**: + +Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Then import the `styles.css` file: ```jsx filename="pages/_app.js" import '../styles.css' @@ -37,3 +40,15 @@ export default function MyApp({ Component, pageProps }) { return } ``` + +**CSS Modules**: + +Rename the `styles.css` file to `styles.module.css`. Then import the file in the component or page where you want to use the styles. + +```jsx filename="pages/index.js" +import styles from '../../styles.module.css' + +export default function Home() { + return
Hello World
+} +``` diff --git a/errors/opt-out-auto-static-optimization.mdx b/errors/opt-out-auto-static-optimization.mdx index 60f6ced7b9..576d1ff555 100644 --- a/errors/opt-out-auto-static-optimization.mdx +++ b/errors/opt-out-auto-static-optimization.mdx @@ -4,20 +4,18 @@ title: Opt-out of Automatic Static Optimization #### Why This Warning Occurred -You are using `getInitialProps` in your [Custom ``](/docs/pages/building-your-application/routing/custom-app). +You are using `getInitialProps` in your [Custom ``](/docs/pages/building-your-application/routing/custom-app) file. -This causes **all non-getStaticProps pages** to be executed on the server -- disabling [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization). +This causes **all pages** that do not use [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) into Server-side Rendering (at runtime) and disables [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization). ## Possible Ways to Fix It -Be sure you meant to use `getInitialProps` in `pages/_app`! -There are some valid use cases for this, but it is often better to handle `getInitialProps` on a _per-page_ basis. +Verify if you need to use `getInitialProps` in `pages/_app`. There are some valid use cases for this, but it's often better to use `getInitialProps` in individual pages. -Check for any [higher-order components](https://reactjs.org/docs/higher-order-components.html) that may have added `getInitialProps` to your [Custom ``](/docs/pages/building-your-application/routing/custom-app). +- Check for any [higher-order components](https://reactjs.org/docs/higher-order-components.html) that may have added `getInitialProps` to your [Custom ``](/docs/pages/building-your-application/routing/custom-app). +- If you previously copied the [Custom ``](/docs/pages/building-your-application/routing/custom-app) example from the old docs, you can remove `getInitialProps`. -If you previously copied the [Custom ``](/docs/pages/building-your-application/routing/custom-app) example, you may be able to remove your `getInitialProps`. - -The following `getInitialProps` does nothing and may be removed: +The following `getInitialProps` can be removed: ```js filename="pages/_app.js" class MyApp extends App {