Docs: Add "Going to production" page for App Router

docs/02-app/01-building-your-application/08-deploying/01-production-checklist.mdx

@@ -0,0 +1,139 @@
+---
+title: Going to Production
+description: Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
+---
+
+Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
+
+## Overview
+
+- Use [caching](/docs/app/building-your-application/caching) wherever possible.
+- Ensure your database and backend are deployed in the same region.
+- Aim to reduce client-side JavaScript bundle sizes by [moving the "use client" boundaries down the React component tree](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree).
+- Prevent sensitive data from being exposed to the client with [tainting](/docs/app/building-your-application/data-fetching/patterns#preventing-sensitive-data-from-being-exposed-to-the-client)
+- Ensure errors in nested route segments are handled gracefully with the [error.js file](https://nextjs.org/docs/app/building-your-application/routing/error-handling)
+- Customize your 404 (Not Found) responses using the [`notfound()`](/docs/app/api-reference/functions/not-found) function and [`not-found.js` file](https://nextjs.org/docs/app/api-reference/file-conventions/not-found)
+- Ensure you are [measuring performance](/docs/app/building-your-application/optimizing/analytics).
+- Run [Lighthouse](https://developers.google.com/web/tools/lighthouse) to check for performance, best practices, accessibility, and SEO. For best results, use a production build of Next.js and use incognito in your browser so results aren't affected by extensions.
+- Review [Supported Browsers and Features](/docs/architecture/supported-browsers).
+- Optimize the user experience with built-in components:
+  - [Images](/docs/app/building-your-application/optimizing/images)
+  - [Fonts](/docs/app/building-your-application/optimizing/fonts)
+  - [Scripts](/docs/app/building-your-application/optimizing/scripts)
+  - [Link](/docs/app/building-your-application/routing/linking-and-navigating)
+- Improve [loading performance](#loading-performance)
+- Consider adding a [Content Security Policy](/docs/app/building-your-application/configuring/content-security-policy)
+
+## Caching
+
+Caching is essential for improving response times and reducing requests to backend services. The App Router in Next.js offers a robust [caching mechanism](https://nextjs.org/docs/app/building-your-application/caching) that supports static and dynamic rendering, as well as [revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data).
+
+### Static assets
+
+Next.js automatically adds caching headers to immutable assets in **`/public`** or other static directories. Assets like CSS, static images, and other media are ideal candidates for long-term caching as they rarely change. The default caching headers applied are:
+
+```jsx
+Cache-Control: public, max-age=31536000, immutable
+```
+
+This setup ensures that these assets are cached efficiently, reducing load times for returning users.
+
+### Data caching
+
+Next.js's built-in [Data Cache](/docs/app/building-your-application/caching#data-cache) persists results of data fetches across server requests and deployments. By default, fetch requests are cached, allowing data to be reused in subsequent requests. This feature is particularly useful for content that doesn't change frequently.
+
+### Revalidation
+
+The caching behavior of data requests can be controlled through various strategies. Next.js supports [time-based revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#time-based-revalidation) (automatically refreshing the cache after a set period) and [on-demand revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation) (refreshing the cache based on specific events).
+
+### Caching in Server Actions
+
+While Server Actions in Next.js are primarily used for mutations (like POST, PUT, DELETE operations), they also play a crucial role in cache management. After a mutation, it's crucial to ensure that the cached data reflects the latest state. Next.js facilitates this by providing APIs such as `revalidatePath` and `revalidateTag`. These APIs can be used to purge or revalidate the cache immediately after a mutation. This capability ensures that any changes made by Server Actions are promptly reflected in the cached data, maintaining data consistency and accuracy.
+
+### Opting Out of Caching
+
+There are scenarios where caching might not be desirable as users need the most up-to-date content. Next.js allows [opting out of the Data Cache](/docs/app/building-your-application/caching#opting-out-1) for specific fetch requests. This can be achieved with settings such as `cache: 'no-store'` or `revalidate: 0`.
+
+## Reducing JavaScript bundle sizes
+
+Making sure your website sends less JavaScript to the browser is important for speed. To help you understand and manage your JavaScript bundles, you can use these tools to visualize your bundles and/or identify large dependencies.
+
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) – Shows the size of each package you import right in VSCode.
+- [Package Phobia](https://packagephobia.com/) – Helps you see the size impact of adding new dev dependencies to your project.
+- [Bundle Phobia](https://bundlephobia.com/) - Tells you how much a new dependency could increase your JavaScript size.
+- [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – Creates a visual, interactive map of your webpack output files to show where space is used.
+- [bundlejs](https://bundlejs.com/) - A browser tool for bundling and minifying projects, showing compressed sizes.
+
+Additionally, make sure to implement the recommended optimization strategies.
+
+- Optimize Server Actions - Focus on simplifying and speeding up your server actions. This can be achieved by optimizing database queries, reducing external API calls, and ensuring server-side computations are efficient. Efficient server-side processing helps reduce the time it takes for your pages to load and improves the overall performance of your website.
+- Minimize Client-Side JavaScript - It's important to keep JavaScript on the client-side as small as possible for quicker website loading and a better user experience.
+- Moving client components down the tree or carefully considering where to place the "use client" boundaries. In other words, moving more rendering / logic to the server using Server Components.
+- Fetching data on the server: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-on-the-server
+
+### Optimizing with `@next/bundle-analyzer`
+
+[`@next/bundle-analyzer`](https://www.npmjs.com/package/@next/bundle-analyzer) is a plugin for Next.js that helps manage the size of your JavaScript files. It shows you how big each part of your webpack output is. This is helpful because you can find and fix parts of your code that are too large. For example, you might remove large dependencies, split your code, or only load some parts when needed.
+
+How to use `@next/bundle-analyzer`:
+
+1. **Install**: Run `npm install @next/bundle-analyzer webpack-bundle-analyzer`.
+2. **Configure**: Add the bundle analyzer's settings to your `next.config.js`.
+
+```js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+module.exports = withBundleAnalyzer({})
+```
+
+3. **Run Analysis**: Use `ANALYZE=true npm run build` to start looking at your file sizes.
+4. **Review Findings**: Check the report to see where you can make improvements.
+
+Doing this regularly while you develop and before deploying your site can help you identify performance issues earlier.
+
+## Logging
+
+Since Next.js runs on both the client and server, there are multiple forms of logging supported:
+
+- `console.log`: Works in both browser and server. In the browser, it logs to the console. On the server, it outputs to the terminal.
+- `process.stdout.write`: Used on the server for more control over the output format, writing directly to stdout.
+
+If you want a structured logging package, we recommend [Pino](https://www.npmjs.com/package/pino). If you're using Vercel, there are [pre-built logging integrations](https://vercel.com/integrations?utm_source=next-site&utm_medium=docs&utm_campaign=next-website#logging) compatible with Next.js.
+
+## Error Handling
+
+Proper error handling is key to keeping your application stable and providing a good user experience. This is especially important with the Dynamic Route Segments and Server Actions in the App Router.
+
+**Use of `error.js` for Error Handling**:
+
+The [`error.js` file](/docs/app/building-your-application/routing/error-handling) convention is used for gracefully handling runtime errors in nested routes. It automatically wraps a route segment and its nested children in a React Error Boundary, allowing you to create a tailored error UI and isolate errors to specific segments while keeping the rest of the application functional.
+
+If an error is thrown inside a Server Component, Next.js forwards an `Error` object to the nearest `error.js` file. This object includes a generic message and a digest property in production as a security measure to prevent leaking sensitive details.
+
+## Loading Performance
+
+To effectively improve loading performance, it's essential to measure the user experience using [Core Web Vitals](https://vercel.com/blog/core-web-vitals?utm_source=next-site&utm_medium=docs&utm_campaign=next-website). These are a set of metrics developed by Google to gauge the quality of user experience on web pages, influencing Google's search rankings.
+
+### Using Lighthouse for Performance Analysis
+
+Google Lighthouse is a powerful tool for assessing Core Web Vitals, along with other important aspects such as performance, accessibility, best practices, and SEO. To get the most accurate results:
+
+1. Use a production build of your Next.js application.
+2. Run Lighthouse in incognito mode to prevent browser extensions from affecting the results.
+
+Lighthouse can be used both as a browser extension and a command-line tool, providing detailed reports on how your website performs against these vital metrics.
+
+### Utilizing Vercel's Dashboard (for Vercel Deployments)
+
+If your Next.js application is deployed on [Vercel](https://vercel.com/vercel), you can leverage Vercel's built-in analytics dashboard to measure Core Web Vitals. This dashboard provides real-world performance insights based on actual visitor data, offering a practical view of how your website is performing in the field.
+
+Once you are able to measure the loading performance, use the following strategies to improve it iteratively. That is, if you apply one strategy, measure the new performance and continue tweaking until you do not see much improvement. Then, you can move on to the next strategy.
+
+- **Optimize Caching**: Use caching strategies as detailed in the caching section.
+- **Server Actions Efficiency**: Optimize server actions for quick data retrieval and minimal processing.
+- **Reduce JavaScript Bundle Sizes**: Remove unused JavaScript, and move data fetching and logic to the server.
+  - Setting up your Code Editor to view import costs and sizes
+  - Finding alternative smaller packages
+  - Dynamically loading components and dependencies
+- **Streaming**: Leverage the Loading UI and Suspense to stream chunks in parallel for improved initial load.