Changes all Note to Good to know

vercel · Jun 10, 2023 · 5ab578a · 5ab578a
1 parent f5c4d49
commit 5ab578a
Show file tree

Hide file tree

Showing 30 changed files with 46 additions and 49 deletions.
diff --git a/docs/01-getting-started/01-installation.mdx b/docs/01-getting-started/01-installation.mdx
@@ -39,7 +39,7 @@ Next.js now ships with TypeScript, ESLint, and Tailwind CSS configuration by def
 
 After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies.
 
-> **Note:** While you can use the [Pages Router](/docs/pages) in your new project. We recommend starting new applications with the App Router to leverage React's latest features.
+> **Good to know:** While you can use the [Pages Router](/docs/pages) in your new project. We recommend starting new applications with the App Router to leverage React's latest features.
 
 ## Manual Installation
 

diff --git a/docs/01-getting-started/03-react-essentials.mdx b/docs/01-getting-started/03-react-essentials.mdx
@@ -731,7 +731,7 @@ export default function RootLayout({ children }) {
 
 With the provider rendered at the root, all other Client Components throughout your app will be able to consume this context.
 
-> Note: You should render providers as deep as possible in the tree – notice how `ThemeProvider` only wraps `{children}` instead of the entire `<html>` document. This makes it easier for Next.js to optimize the static parts of your Server Components.
+> **Good to know:** You should render providers as deep as possible in the tree – notice how `ThemeProvider` only wraps `{children}` instead of the entire `<html>` document. This makes it easier for Next.js to optimize the static parts of your Server Components.
 
 ### Rendering third-party context providers in Server Components
 

diff --git a/docs/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx b/docs/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx
@@ -35,7 +35,7 @@ export default function Page({ params }) {
 
 See the [generateStaticParams()](#generating-static-params) page to learn how to generate the params for the segment.
 
-> **Note:** Dynamic Segments are equivalent to [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes) in the `pages` directory.
+> **Good to know:** Dynamic Segments are equivalent to [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes) in the `pages` directory.
 
 ## Generating Static Params
 

diff --git a/docs/02-app/01-building-your-application/01-routing/10-router-handlers.mdx b/docs/02-app/01-building-your-application/01-routing/10-router-handlers.mdx
@@ -170,7 +170,7 @@ export async function POST() {
 }
 ```
 
-> **Note:** Previously, API Routes could have been used for use cases like handling form submissions. Route Handlers are likely not the solution for these uses cases. We will be recommending the use of [mutations](/docs/app/building-your-application/data-fetching/server-actions) for this when ready.
+> **Good to know:** Previously, API Routes could have been used for use cases like handling form submissions. Route Handlers are likely not the solution for these uses cases. We will be recommending the use of [mutations](/docs/app/building-your-application/data-fetching/server-actions) for this when ready.
 
 ### Route Resolution
 

diff --git a/docs/02-app/01-building-your-application/01-routing/12-colocation.mdx b/docs/02-app/01-building-your-application/01-routing/12-colocation.mdx
@@ -141,7 +141,7 @@ There is no "right" or "wrong" way when it comes to organizing your own files an
 
 The following section lists a very high-level overview of common strategies. The simplest takeaway is to choose a strategy that works for you and your team and be consistent across the project.
 
-> **Note:** In our examples below, we're using `components` and `lib` folders as generalized placeholders, their naming has no special framework significance and your projects might use other folders like `ui`, `utils`, `hooks`, `styles`, etc.
+> **Good to know:** In our examples below, we're using `components` and `lib` folders as generalized placeholders, their naming has no special framework significance and your projects might use other folders like `ui`, `utils`, `hooks`, `styles`, etc.
 
 ### Store project files outside of `app`
 

diff --git a/...p/01-building-your-application/02-rendering/01-static-and-dynamic-rendering.mdx b/...p/01-building-your-application/02-rendering/01-static-and-dynamic-rendering.mdx
@@ -36,7 +36,7 @@ This table summarizes how [dynamic functions](#dynamic-functions) and [caching](
 
 Note how dynamic functions always opt the route into dynamic rendering, regardless of whether the data fetching is cached or not. In other words, static rendering is dependent not only on the data fetching behavior, but also on the dynamic functions used in the route.
 
-> **Note:** In the future, Next.js will introduce hybrid server-side rendering where layouts and pages in a route can be independently statically or dynamically rendered, instead of the whole route.
+> **Good to know:** In the future, Next.js will introduce hybrid server-side rendering where layouts and pages in a route can be independently statically or dynamically rendered, instead of the whole route.
 
 ### Dynamic Functions
 

diff --git a/docs/02-app/01-building-your-application/02-rendering/index.mdx b/docs/02-app/01-building-your-application/02-rendering/index.mdx
@@ -22,7 +22,7 @@ There are two environments where your application code can be rendered: the clie
 - The **client** refers to the browser on a user's device that sends a request to a server for your application code. It then turns the response from the server into an interface the user can interact with.
 - The **server** refers to the computer in a data center that stores your application code, receives requests from a client, does some computation, and sends back an appropriate response.
 
-> **Note:** Server can refer to computers in regions where your application is deployed to, the [Edge Network](https://vercel.com/docs/concepts/edge-network/overview) where your application code is distributed, or [Content Delivery Networks (CDNs)](https://developer.mozilla.org/en-US/docs/Glossary/CDN) where the result of the rendering work can be cached.
+> **Good to know:** Server can refer to computers in regions where your application is deployed to, the [Edge Network](https://vercel.com/docs/concepts/edge-network/overview) where your application code is distributed, or [Content Delivery Networks (CDNs)](https://developer.mozilla.org/en-US/docs/Glossary/CDN) where the result of the rendering work can be cached.
 
 ## Component-level Client and Server Rendering
 
@@ -42,7 +42,7 @@ In addition to client-side and server-side rendering with React components, Next
 
 With **Static Rendering**, both Server _and_ Client Components can be prerendered on the server at **build time**. The result of the work is [cached](/docs/app/building-your-application/data-fetching/caching) and reused on subsequent requests. The cached result can also be [revalidated](/docs/app/building-your-application/data-fetching#revalidating-data).
 
-> **Note:** This is equivalent to [Static Site Generation (SSG)](/docs/pages/building-your-application/rendering/static-site-generation) and [Incremental Static Regeneration (ISR)](/docs/pages/building-your-application/rendering/incremental-static-regeneration) in the [Pages Router](/docs/pages/building-your-application/rendering).
+> **Good to know:** This is equivalent to [Static Site Generation (SSG)](/docs/pages/building-your-application/rendering/static-site-generation) and [Incremental Static Regeneration (ISR)](/docs/pages/building-your-application/rendering/incremental-static-regeneration) in the [Pages Router](/docs/pages/building-your-application/rendering).
 
 Server and Client Components are rendered differently during Static Rendering:
 
@@ -53,7 +53,7 @@ Server and Client Components are rendered differently during Static Rendering:
 
 With Dynamic Rendering, both Server _and_ Client Components are rendered on the server at **request time**. The result of the work is not cached.
 
-> **Note:** This is equivalent to [Server-Side Rendering (`getServerSideProps()`)](/docs/pages/building-your-application/rendering/server-side-rendering) in the [Pages Router](/docs/pages/building-your-application/rendering).
+> **Good to know:** This is equivalent to [Server-Side Rendering (`getServerSideProps()`)](/docs/pages/building-your-application/rendering/server-side-rendering) in the [Pages Router](/docs/pages/building-your-application/rendering).
 
 To learn more about static and dynamic behavior, see the [Static and Dynamic Rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering) page. To learn more about caching, see the [Caching](/docs/app/building-your-application/data-fetching/caching) sections.
 

diff --git a/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
@@ -75,7 +75,7 @@ Next.js provides helpful server functions you may need when fetching data in Ser
 
 Wrapping `fetch` in `use` is currently **not** recommended in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/v4).
 
-> **Note:** We'll be adding more examples once `fetch` and `use` work in Client Components.
+> **Good to know:** We'll be adding more examples once `fetch` and `use` work in Client Components.
 
 ## Static Data Fetching
 

diff --git a/docs/02-app/01-building-your-application/03-data-fetching/02-caching.mdx b/docs/02-app/01-building-your-application/03-data-fetching/02-caching.mdx
@@ -264,7 +264,7 @@ The `getUser.ts` exports can be used by layouts, pages, or components to give th
 
 ## Segment-level Caching
 
-> **Note:** We recommend using per-request caching for improved granularity and control over caching.
+> **Good to know:** We recommend using per-request caching for improved granularity and control over caching.
 
 Segment-level caching allows you to cache and revalidate data used in route segments.
 

diff --git a/docs/02-app/01-building-your-application/03-data-fetching/04-server-actions.mdx b/docs/02-app/01-building-your-application/03-data-fetching/04-server-actions.mdx
@@ -117,7 +117,7 @@ export default function ClientComponent() {
 }
 ```
 
-> **Note:** When using a top-level `"use server"` directive, all exports below will be considered Server Actions. You can have multiple Server Actions in a single file.
+> **Good to know:** When using a top-level `"use server"` directive, all exports below will be considered Server Actions. You can have multiple Server Actions in a single file.
 
 ### Invocation
 
@@ -148,7 +148,7 @@ export default function AddToCart({ productId }) {
 }
 ```
 
-> **Note:** An `action` is similar to the HTML primitive [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action)
+> **Good to know:** An `action` is similar to the HTML primitive [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action)
 
 #### `formAction`
 
@@ -176,13 +176,13 @@ export default function Form() {
 }
 ```
 
-> **Note:** A `formAction` is the HTML primitive [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction). React now allows you to pass functions to this attribute.
+> **Good to know:** A `formAction` is the HTML primitive [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction). React now allows you to pass functions to this attribute.
 
 #### Custom invocation using `startTransition`
 
 You can also invoke Server Actions without using `action` or `formAction`. You can achieve this by using `startTransition` provided by the `useTransition` hook, which can be useful if you want to use Server Actions outside of forms, buttons, or inputs.
 
-> **Note:** Using `startTransition` disables the out-of-the-box Progressive Enhancement.
+> **Good to know:** Using `startTransition` disables the out-of-the-box Progressive Enhancement.
 
 ```jsx filename="app/components/example-client-component.js" highlight={3, 7, 10}
 'use client'

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -223,7 +223,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **Note:** External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use `<link rel="stylesheet" />`.
+> **Good to know:** External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use `<link rel="stylesheet" />`.
 
 </AppOnly>
 

diff --git a/docs/02-app/01-building-your-application/04-styling/03-css-in-js.mdx b/docs/02-app/01-building-your-application/04-styling/03-css-in-js.mdx
@@ -23,7 +23,7 @@ The following are currently working on support:
 - [Material UI](https://github.com/mui/material-ui/issues/34905#issuecomment-1401306594)
 - [Chakra UI](https://github.com/chakra-ui/chakra-ui/issues/7180)
 
-> **Note:** We're testing out different CSS-in-JS libraries and we'll be adding more examples for libraries that support React 18 features and/or the `app` directory.
+> **Good to know:** We're testing out different CSS-in-JS libraries and we'll be adding more examples for libraries that support React 18 features and/or the `app` directory.
 
 If you want to style Server Components, we recommend using [CSS Modules](/docs/app/building-your-application/styling/css-modules) or other solutions that output CSS files, like PostCSS or [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css).
 

diff --git a/docs/02-app/01-building-your-application/06-configuring/01-typescript.mdx b/docs/02-app/01-building-your-application/06-configuring/01-typescript.mdx
@@ -67,7 +67,7 @@ The TypeScript plugin can help with:
 - Ensuring the `use client` directive is used correctly.
 - Ensuring client hooks (like `useState`) are only used in Client Components.
 
-> **Note:** More features will be added in the future.
+> **Good to know:** More features will be added in the future.
 
 </AppOnly>
 

diff --git a/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx b/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx
@@ -186,7 +186,7 @@ If your Markdown or MDX files do _not_ live inside your application, you can fet
 
 There are two popular community packages for fetching MDX content: [`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support) and [`contentlayer`](https://www.contentlayer.dev/). For example, the following example uses `next-mdx-remote`:
 
-> **Note:** Please proceed with caution. MDX compiles to JavaScript and is executed on the server. You should only fetch MDX content from a trusted source, otherwise this can lead to remote code execution (RCE).
+> **Good to know:** Please proceed with caution. MDX compiles to JavaScript and is executed on the server. You should only fetch MDX content from a trusted source, otherwise this can lead to remote code execution (RCE).
 
 ```tsx filename="app/page.tsx" switcher
 import { MDXRemote } from 'next-mdx-remote/rsc'

diff --git a/docs/02-app/01-building-your-application/07-deploying/01-static-exports.mdx b/docs/02-app/01-building-your-application/07-deploying/01-static-exports.mdx
@@ -11,7 +11,7 @@ Since Next.js supports this static export, it can be deployed and hosted on any
 
 <PagesOnly>
 
-> **Note:** We recommend using the App Router for enhanced static export support.
+> **Good to know:** We recommend using the App Router for enhanced static export support.
 
 </PagesOnly>
 

diff --git a/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx b/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx
@@ -32,7 +32,7 @@ If you're using ESLint, you need to upgrade your ESLint version:
 npm install -D eslint-config-next@latest
 ```
 
-> **Note:** You may need to restart the ESLint server in VS Code for the ESLint changes to take effect. Open the Command Palette (`cmd+shift+p` on Mac; `ctrl+shift+p` on Windows) and search for `ESLint: Restart ESLint Server`.
+> **Good to know:** You may need to restart the ESLint server in VS Code for the ESLint changes to take effect. Open the Command Palette (`cmd+shift+p` on Mac; `ctrl+shift+p` on Windows) and search for `ESLint: Restart ESLint Server`.
 
 ## Next Steps
 
@@ -340,7 +340,7 @@ We recommend breaking down the migration of a page into two main steps:
 - Step 1: Move the default exported Page Component into a new Client Component.
 - Step 2: Import the new Client Component into a new `page.js` file inside the `app` directory.
 
-> **Note:** This is the easiest migration path because it has the most comparable behavior to the `pages` directory.
+> **Good to know:** This is the easiest migration path because it has the most comparable behavior to the `pages` directory.
 
 **Step 1: Create a new Client Component**
 
@@ -870,7 +870,7 @@ export async function GET(request: Request) {}
 export async function GET(request) {}
 ```
 
-> **Note:** If you previously used API routes to call an external API from the client, you can now use [Server Components](/docs/getting-started/react-essentials#server-components) instead to securely fetch data. Learn more about [data fetching](/docs/app/building-your-application/data-fetching/fetching).
+> **Good to know:** If you previously used API routes to call an external API from the client, you can now use [Server Components](/docs/getting-started/react-essentials#server-components) instead to securely fetch data. Learn more about [data fetching](/docs/app/building-your-application/data-fetching/fetching).
 
 ### Step 7: Styling
 

diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
@@ -206,7 +206,7 @@ export default function Icon({ params }) {
 
 The default export function should return a `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
 
-> **Note:** `ImageResponse` satisfies this return type.
+> **Good to know:** `ImageResponse` satisfies this return type.
 
 ### Config exports
 

diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -242,7 +242,7 @@ export default function Image({ params }) {
 
 The default export function should return a `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response`.
 
-> **Note:** `ImageResponse` satisfies this return type.
+> **Good to know:** `ImageResponse` satisfies this return type.
 
 ### Config exports
 

diff --git a/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx b/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx
@@ -37,7 +37,7 @@ export default function NotFound() {
 }
 ```
 
-> **Note:** In addition to catching expected `notFound()` errors, the root `app/not-found.js` file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the `app/not-found.js` file.
+> **Good to know:** In addition to catching expected `notFound()` errors, the root `app/not-found.js` file also handles any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the `app/not-found.js` file.
 
 ## Props
 

diff --git a/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx b/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
@@ -56,7 +56,7 @@ export const dynamic = 'auto'
 // 'auto' | 'force-dynamic' | 'error' | 'force-static'
 ```
 
-> **Migration Note:** The new model in the `app` directory favors granular caching control at the `fetch` request level over the binary all-or-nothing model of `getServerSideProps` and `getStaticProps` at the page-level in the `pages` directory. The `dynamic` option is a way to opt back in to the previous model as a convenience and provides a simpler migration path.
+> **Good to know:** The new model in the `app` directory favors granular caching control at the `fetch` request level over the binary all-or-nothing model of `getServerSideProps` and `getStaticProps` at the page-level in the `pages` directory. The `dynamic` option is a way to opt back in to the previous model as a convenience and provides a simpler migration path.
 
 - **`'auto'`** (default): The default option to cache as much as possible without preventing any components from opting into dynamic behavior.
 - **`'force-dynamic'`**: Force dynamic rendering and dynamic data fetching of a layout or page by disabling all caching of `fetch` requests and always revalidating. This option is equivalent to:
@@ -69,7 +69,7 @@ export const dynamic = 'auto'
   - `getStaticProps()` in the `pages` directory.
   - Setting the option of every `fetch()` request in a layout or page to `{ cache: 'force-cache' }`.
   - Setting the segment config to `fetchCache = 'only-cache', dynamicParams = false`.
-  - Note: `dynamic = 'error'` changes the default of `dynamicParams` from `true` to `false`. You can opt back into dynamically rendering pages for dynamic params not generated by `generateStaticParams` by manually setting `dynamicParams = true`.
+  - `dynamic = 'error'` changes the default of `dynamicParams` from `true` to `false`. You can opt back into dynamically rendering pages for dynamic params not generated by `generateStaticParams` by manually setting `dynamicParams = true`.
 - **`'force-static'`**: Force static rendering and static data fetching of a layout or page by forcing [`cookies()`](/docs/app/api-reference/functions/cookies), [`headers()`](/docs/app/api-reference/functions/headers) and [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) to return empty values.
 
 > **Good to know:**