docs: unify the header deps by removing # (#72391)

## Summary Remove redundant `#` from [error pages](https://github.com/vercel/next.js/tree/canary/errors). ## Description Follow up #52038 and #72263. Updated [template.txt](https://github.com/vercel/next.js/blob/canary/errors/template.txt) and clarified the header deps. Then rewrite as per the template. ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
vercel · Nov 7, 2024 · 74a19b7 · 74a19b7
1 parent 3066987
commit 74a19b7
Show file tree

Hide file tree

Showing 37 changed files with 83 additions and 81 deletions.
diff --git a/errors/class-component-in-server-component.mdx b/errors/class-component-in-server-component.mdx
@@ -10,7 +10,7 @@ You are rendering a React Class Component in a Server Component, `React.Componen
 
 Use a Function Component.
 
-##### Before
+### Before
 
 ```jsx filename="app/page.js"
 export default class Page extends React.Component {
@@ -20,7 +20,7 @@ export default class Page extends React.Component {
 }
 ```
 
-##### After
+### After
 
 ```jsx filename="app/page.js"
 export default function Page() {
@@ -30,7 +30,7 @@ export default function Page() {
 
 Mark the component rendering the React Class Component as a Client Component by adding `'use client'` at the top of the file.
 
-##### Before
+### Before
 
 ```jsx filename="app/page.js"
 export default class Page extends React.Component {
@@ -40,7 +40,7 @@ export default class Page extends React.Component {
 }
 ```
 
-##### After
+### After
 
 ```jsx filename="app/page.js"
 'use client'

diff --git a/errors/context-in-server-component.mdx b/errors/context-in-server-component.mdx
@@ -10,15 +10,15 @@ You are using `createContext` in a Server Component but it only works in Client
 
 Mark the component using `createContext` as a Client Component by adding `'use client'` at the top of the file.
 
-##### Before
+### Before
 
 ```jsx filename="app/example-component.js"
 import { createContext } from 'react'
 
 const Context = createContext()
 ```
 
-##### After
+### After
 
 ```jsx filename="app/example-component.js"
 'use client'

diff --git a/errors/css-global.mdx b/errors/css-global.mdx
@@ -15,7 +15,7 @@ There are two possible ways to fix this error:
 - 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). This will allow you to import the stylesheet and scope the styles to a specific component.
 
-#### Example
+### Example
 
 Consider the stylesheet named [`styles.css`](/docs/pages/building-your-application/styling/css)
 

diff --git a/errors/custom-document-image-import.mdx b/errors/custom-document-image-import.mdx
@@ -12,7 +12,7 @@ Custom documents aren't compiled for the browser and images statically imported
 
 If your image needs to be displayed on every page you can relocate it to your [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) file.
 
-#### Example
+### Example
 
 ```jsx filename="pages/_app.js"
 import yourImage from 'path/to/your/image'

diff --git a/errors/dynamic-server-error.mdx b/errors/dynamic-server-error.mdx
@@ -2,7 +2,7 @@
 title: DynamicServerError - Dynamic Server Usage
 ---
 
-#### Why This Message Occurred
+## Why This Message Occurred
 
 You attempted to use a Next.js function that depends on Async Context (such as `headers` or `cookies` from `next/headers`) but it was not bound to the same call stack as the function that ran it (e.g., calling `cookies()` inside of a `setTimeout` or `setInterval`).
 

diff --git a/errors/empty-configuration.mdx b/errors/empty-configuration.mdx
@@ -2,7 +2,7 @@
 title: 'Detected `next.config.js`, no exported configuration found'
 ---
 
-#### Why This Warning Occurred
+## Why This Warning Occurred
 
 There is no object exported from next.config.js or the object is empty.
 

diff --git a/errors/experimental-jest-transformer.mdx b/errors/experimental-jest-transformer.mdx
@@ -2,7 +2,7 @@
 title: '`next/jest` Experimental'
 ---
 
-#### Why This Message Occurred
+## Why This Message Occurred
 
 You are using `next/jest` which is currently an experimental feature of Next.js. In a future version of Next.js `next/jest` will be marked as stable.
 

diff --git a/errors/failed-loading-swc.mdx b/errors/failed-loading-swc.mdx
@@ -2,7 +2,7 @@
 title: SWC Failed to Load
 ---
 
-#### Why This Message Occurred
+## Why This Message Occurred
 
 Next.js now uses Rust-based compiler [SWC](https://swc.rs/) to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh.
 

diff --git a/errors/get-initial-props-export.mdx b/errors/get-initial-props-export.mdx
@@ -2,7 +2,7 @@
 title: '`getInitialProps` Export Warning'
 ---
 
-#### Why This Warning Occurred
+## Why This Warning Occurred
 
 You attempted to statically export your application via `output: 'export'` or `next export`, however, one or more of your pages uses `getInitialProps`.
 

diff --git a/errors/google-fonts-missing-subsets.mdx b/errors/google-fonts-missing-subsets.mdx
@@ -8,15 +8,15 @@ Preload is enabled for a font that is missing a specified subset.
 
 ## Possible Ways to Fix It
 
-##### Specify which subsets to preload for that font.
+### Specify which subsets to preload for that font.
 
 ```js filename="example.js"
 const inter = Inter({ subsets: ['latin'] })
 ```
 
 Note: previously it was possible to specify default subsets in your `next.config.js` with the `experimental.fontLoaders` option, but this is no longer supported.
 
-##### Disable preloading for that font
+### Disable preloading for that font
 
 If it's not possible to preload your intended subset you can disable preloading.
 

diff --git a/errors/invalid-route-source.mdx b/errors/invalid-route-source.mdx
@@ -12,7 +12,7 @@ This could have been due to trying to use normal `RegExp` syntax like negative l
 
 Wrap the `RegExp` part of your `source` as an un-named parameter.
 
-##### Custom Routes
+### Custom Routes
 
 **Before**
 
@@ -32,7 +32,7 @@ Wrap the `RegExp` part of your `source` as an un-named parameter.
 }
 ```
 
-##### Middleware
+### Middleware
 
 **Before**
 

diff --git a/errors/missing-root-layout-tags.mdx b/errors/missing-root-layout-tags.mdx
@@ -2,11 +2,11 @@
 title: Missing Root Layout tags
 ---
 
-#### Why This Error Occurred
+## Why This Error Occurred
 
 You forgot to define the `<html>` and/or `<body>` tags in your Root Layout.
 
-#### Possible Ways to Fix It
+## Possible Ways to Fix It
 
 To fix this error, make sure that both `<html>` and `<body>` are present in your Root Layout.
 
@@ -24,6 +24,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 }
 ```
 
-### Useful Links
+## Useful Links
 
 - [Root Layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)
diff --git a/errors/missing-suspense-with-csr-bailout.mdx b/errors/missing-suspense-with-csr-bailout.mdx
@@ -2,11 +2,11 @@
 title: Missing Suspense boundary with useSearchParams
 ---
 
-#### Why This Error Occurred
+## Why This Error Occurred
 
 Reading search parameters through `useSearchParams()` without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.
 
-#### Possible Ways to Fix It
+## Possible Ways to Fix It
 
 Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.
 
@@ -56,7 +56,7 @@ export function Searchbar() {
 
 This will ensure the page does not de-opt to client-side rendering.
 
-#### Disabling
+## Disabling
 
 > Note: This is only available with Next.js version 14.x. If you're in versions above 14 please fix it with the approach above.
 
@@ -72,6 +72,6 @@ module.exports = {
 
 This configuration option will be removed in a future major version.
 
-### Useful Links
+## Useful Links
 
 - [`useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
diff --git a/errors/module-not-found.mdx b/errors/module-not-found.mdx
@@ -13,7 +13,7 @@ A module not found error can occur for many different reasons:
 
 ## Possible Ways to Fix It
 
-##### The module you're trying to import is not installed in your dependencies
+### The module you're trying to import is not installed in your dependencies
 
 When importing a module from [npm](https://npmjs.com) this module has to be installed locally.
 
@@ -28,11 +28,11 @@ The `swr` module has to be installed using a package manager.
 - When using `npm`: `npm install swr`
 - When using `yarn`: `yarn add swr`
 
-##### The module you're trying to import is in a different directory
+### The module you're trying to import is in a different directory
 
 Make sure that the path you're importing refers to the right directory and file.
 
-##### The module you're trying to import has a different casing
+### The module you're trying to import has a different casing
 
 Make sure the casing of the file is correct.
 
@@ -51,7 +51,7 @@ import MyComponent from '../components/Mycomponent'
 
 Incorrect casing will lead to build failures on case-sensitive environments like most Linux-based continuous integration and can cause issues with Fast Refresh.
 
-##### The module you're trying to import uses Node.js specific modules
+### The module you're trying to import uses Node.js specific modules
 
 `getStaticProps`, `getStaticPaths`, and `getServerSideProps` allow for using modules that can only run in the Node.js environment. This allows you to do direct database queries or reading data from Redis to name a few examples.
 

diff --git a/errors/next-dynamic-api-wrong-context.mdx b/errors/next-dynamic-api-wrong-context.mdx
@@ -2,13 +2,13 @@
 title: Dynamic API was called outside request
 ---
 
-#### Why This Error Occurred
+## Why This Error Occurred
 
 A Dynamic API was called outside a request scope. (Eg.: Global scope).
 
 Note that Dynamic APIs could have been called deep inside other modules/functions (eg.: third-party libraries) that are not immediately visible.
 
-#### Possible Ways to Fix It
+## Possible Ways to Fix It
 
 Make sure that all Dynamic API calls happen in a request scope.
 
@@ -34,7 +34,7 @@ export async function GET() {
 }
 ```
 
-### Useful Links
+## Useful Links
 
 - [`headers()` function](https://nextjs.org/docs/app/api-reference/functions/headers)
 - [`cookies()` function](https://nextjs.org/docs/app/api-reference/functions/cookies)

diff --git a/errors/next-image-unconfigured-host.mdx b/errors/next-image-unconfigured-host.mdx
@@ -25,7 +25,7 @@ module.exports = {
 }
 ```
 
-#### Fixing older versions of Next.js
+### Fixing older versions of Next.js
 
 <details>
   <summary>Using Next.js prior to 12.3.0?</summary>

diff --git a/errors/next-prerender-crypto.mdx b/errors/next-prerender-crypto.mdx
@@ -2,13 +2,13 @@
 title: Cannot access `crypto.getRandomValue()`, `crypto.randomUUID()`, or another web or node crypto API that generates random values synchronously while prerendering
 ---
 
-#### Why This Error Occurred
+## Why This Error Occurred
 
 An API that produces a random value synchronously from the Web Crypto API or from Node's `crypto` API was called outside of a `"use cache"` scope and without first calling `await connection()`. Random values that are produced synchronously must either be inside a `"use cache"` scope or be preceded with `await connection()` to explicitly communicate to Next.js whether the random values produced can be reused across many requests (cached) or if they must be unique per Request (`await connection()`).
 
 If the API used has an async version you can also switch to that in instead of using `await connection()`.
 
-#### Possible Ways to Fix It
+## Possible Ways to Fix It
 
 If you are generating a token to talk to a database that itself should be cached move the token generation inside the `"use cache"`.
 
@@ -91,7 +91,7 @@ export default async function Page() {
 }
 ```
 
-### Useful Links
+## Useful Links
 
 - [`connection` function](https://nextjs.org/docs/app/api-reference/functions/connection)
 - [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)

diff --git a/errors/next-prerender-current-time.mdx b/errors/next-prerender-current-time.mdx
@@ -2,15 +2,15 @@
 title: Cannot infer intended usage of current time with `Date.now()`, `Date()`, or `new Date()`
 ---
 
-#### Why This Error Occurred
+## Why This Error Occurred
 
 Reading the current time can be ambiguous. Sometimes you intend to capture the time when something was cached, other times you intend to capture the time of a user Request. You might also be trying to measure runtime performance to track elapsed time.
 
 In this instance Next.js cannot determine your intent from usage so it needs you to clarify your intent. The way you do that depends on your use case. See the possible solutions below for how to move forward.
 
-#### Possible Ways to Fix It
+## Possible Ways to Fix It
 
-##### Performance use case
+### Performance use case
 
 If you are using the current time for performance tracking with elapsed time use `performance.now()`.
 
@@ -41,7 +41,7 @@ export default async function Page() {
 
 Note: If you need report an absolute time to an observability tool you can also use `performance.timeOrigin + performance.now()`.
 
-##### Cacheable use cases
+### Cacheable use cases
 
 If you want to read the time when some cache entry is created (such as when a Next.js page is rendered at build-time or when revalidating a static page), move the current time read inside a cached function using `"use cache"`.
 
@@ -94,7 +94,7 @@ export default async function Page() {
 }
 ```
 
-##### Reactive use case
+### Reactive use case
 
 If you want the current time to change and be reactive, consider moving this usage to a Client Component. Note that Server Side Rendering timestamps in a Client Component is also considered ambiguous so to implement this properly Next.js needs you to only read the time in the browser, for instance by using `useLayoutEffect()` or `useEffect()`.
 
@@ -149,7 +149,7 @@ export default async function Page() {
 }
 ```
 
-##### Request-time use case
+### Request-time use case
 
 If you want the current time to represent the time of a user Request, add `await connection()` before you read the current time. This instructs Next.js that everything after the `await connection()` requires there to be a user Request before it can run. If you add `await connection()` you will also need to ensure there is a Suspense boundary somewhere above the waiting component that describes a fallback UI React can use. The Suspense can be anywhere in the parent component stack but it is shown here above the waiting component for demonstration purposes.
 
@@ -192,7 +192,7 @@ async function DynamicBanner() {
 }
 ```
 
-### Useful Links
+## Useful Links
 
 - [`Date.now` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now)
 - [`Date constructor` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date)