` tag.
+
+**Note:** If a new page (with an old version) has already been prefetched by `next/link`, Next.js will use the old version. Then, after either a full page refresh or multiple client-side page transitions, Next.js will show the latest version.
+
+## Other hosting options
+
+### Node.js Server
+
+Next.js can be deployed to any hosting provider that supports Node.js. This is the approach you should take if you’re using a [custom server](/docs/advanced-features/custom-server.md).
+
+Make sure your `package.json` has the `"build"` and `"start"` scripts:
+
+```json
+{
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ }
+}
+```
+
+`next build` builds the production application in the `.next` folder. After building, `next start` starts a Node.js server that supports [hybrid pages](/docs/basic-features/pages.md), serving both statically generated and server-side rendered pages.
+
+### Docker Image
+
+
+ Examples
+
+
+
+Next.js can be deployed to any hosting provider that supports [Docker](https://www.docker.com/) containers. You can use this approach when deploying to container orchestrators such as [Kubernetes](https://kubernetes.io/) or [HashiCorp Nomad](https://www.nomadproject.io/), or when running inside a single node in any cloud provider.
+
+Here is a multi-stage `Dockerfile` using `node:alpine` that you can use:
+
+```Dockerfile
+# Install dependencies only when needed
+FROM node:alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:alpine AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+
+# Production image, copy all the files and run next
+FROM node:alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+USER nextjs
+
+EXPOSE 3000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "start"]
+```
+
+Make sure to place this Dockerfile in the root folder of your project.
+
+You can build your container with `docker build . -t my-next-js-app` and run it with `docker run -p 3000:3000 my-next-js-app`.
+
+### Static HTML Export
+
+If you’d like to do a static HTML export of your Next.js app, follow the directions on [our documentation](/docs/advanced-features/static-html-export.md).
diff --git a/nextjs/docs/faq.md b/nextjs/docs/faq.md
new file mode 100644
index 0000000000..8a1cec7254
--- /dev/null
+++ b/nextjs/docs/faq.md
@@ -0,0 +1,79 @@
+---
+description: Get to know more about Next.js with the frequently asked questions.
+---
+
+# Frequently Asked Questions
+
+
+ Is this production ready?
+ Next.js has been powering https://vercel.com since its inception.
+
+ We’re ecstatic about both the developer experience and end-user performance, so we decided to share it with the community.
+
+
+
+ How big is it?
+ The client side bundle size should be measured in a per-app basis. A small Next main bundle is around 65kb gzipped.
+
+
+
+ How can I change the internal webpack configs?
+ Next.js tries its best to remove the overhead of webpack configurations, but for advanced cases where more control is needed, refer to the custom webpack config documentation.
+
+
+
+ What syntactic features are compiled? How do I change them?
+ We track V8. Since V8 has wide support for ES6 and async and await, we compile those. Since V8 doesn’t support class decorators, we don’t compile those.
+
+ See the documentation about customizing babel config for more information.
+
+
+
+ Why a new Router?
+ Next.js is special in that:
+
+ - Routes don’t need to be known ahead of time, We don't ship a route manifest
+ - Routes are always lazy-loadable
+
+
+
+
+ How do I fetch data?
+ It's up to you. You can use the fetch API or SWR inside your React components for remote data fetching; or use our data fetching methods for initial data population.
+
+
+
+ Can I use it with GraphQL?
+ Yes! Here's an example with Apollo.
+
+
+
+ Can I use it with Redux?
+ Yes! Here's an example. And there's another example with thunk.
+
+
+
+ Can I use a CDN for static assets?
+ Yes. You can read more about it here.
+
+
+
+ Can I use Next with my favorite JavaScript library or toolkit?
+ Since our first release we've had many example contributions. You can check them out in the examples directory.
+
+
+
+ What is this inspired by?
+ Many of the goals we set out to accomplish were the ones listed in The 7 principles of Rich Web Applications by Guillermo Rauch.
+
+ The ease-of-use of PHP is a great inspiration. We feel Next.js is a suitable replacement for many scenarios where you would otherwise use PHP to output HTML.
+
+ Unlike PHP, we benefit from the ES6 module system and every page exports a component or function that can be easily imported for lazy evaluation or testing.
+
+ As we were researching options for server-rendering React that didn’t involve a large number of steps, we came across react-page (now deprecated), a similar approach to Next.js by the creator of React Jordan Walke.
+
+
+
+ Can I make a Next.js Progressive Web App (PWA)?
+ Yes! Check out our PWA Example to see how it works.
+
diff --git a/nextjs/docs/getting-started.md b/nextjs/docs/getting-started.md
new file mode 100644
index 0000000000..ebe35fa115
--- /dev/null
+++ b/nextjs/docs/getting-started.md
@@ -0,0 +1,122 @@
+---
+description: Get started with Next.js in the official documentation, and learn more about all our features!
+---
+
+# Getting Started
+
+Welcome to the Next.js documentation!
+
+If you're new to Next.js we recommend that you start with the [learn course](https://nextjs.org/learn/basics/create-nextjs-app).
+
+The interactive course with quizzes will guide you through everything you need to know to use Next.js.
+
+If you have questions about anything related to Next.js, you're always welcome to ask our community on [GitHub Discussions](https://github.com/vercel/next.js/discussions).
+
+#### System Requirements
+
+- [Node.js 12.0](https://nodejs.org/) or later
+- MacOS, Windows (including WSL), and Linux are supported
+
+## Setup
+
+We recommend creating a new Next.js app using `create-next-app`, which sets up everything automatically for you. To create a project, run:
+
+```bash
+npx create-next-app
+# or
+yarn create next-app
+```
+
+If you want to start with a TypeScript project you can use the `--typescript` flag:
+
+```bash
+npx create-next-app --typescript
+# or
+yarn create next-app --typescript
+```
+
+After the installation is complete, follow the instructions to start the development server. Try editing `pages/index.js` and see the result on your browser.
+
+For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/api-reference/create-next-app.md)
+
+## Manual Setup
+
+Install `next`, `react` and `react-dom` in your project:
+
+```bash
+npm install next react react-dom
+# or
+yarn add next react react-dom
+```
+
+Open `package.json` and add the following `scripts`:
+
+```json
+"scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+}
+```
+
+These scripts refer to the different stages of developing an application:
+
+- `dev` - Runs [`next dev`](/docs/api-reference/cli.md#development) which starts Next.js in development mode
+- `build` - Runs [`next build`](/docs/api-reference/cli.md#build) which builds the application for production usage
+- `start` - Runs [`next start`](/docs/api-reference/cli.md#production) which starts a Next.js production server
+- `lint` - Runs [`next lint`](/docs/api-reference/cli.md#lint) which sets up Next.js' built-in ESLint configuration
+
+Next.js is built around the concept of [pages](/docs/basic-features/pages.md). A page is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory.
+
+Pages are associated with a route based on their file name. For example `pages/about.js` is mapped to `/about`. You can even add dynamic route parameters with the filename.
+
+Create a `pages` directory inside your project.
+
+Populate `./pages/index.js` with the following contents:
+
+```jsx
+function HomePage() {
+ return Welcome to Next.js!
+}
+
+export default HomePage
+```
+
+To start developing your application run `npm run dev` or `yarn dev`. This starts the development server on `http://localhost:3000`.
+
+Visit `http://localhost:3000` to view your application.
+
+So far, we get:
+
+- Automatic compilation and bundling (with webpack and babel)
+- [React Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh)
+- [Static generation and server-side rendering](/docs/basic-features/data-fetching.md) of [`./pages/`](/docs/basic-features/pages.md)
+- [Static file serving](/docs/basic-features/static-file-serving.md). `./public/` is mapped to `/`
+
+In addition, any Next.js application is ready for production from the start, read more in our [Deployment documentation](/docs/deployment.md).
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+
+
+
+
+
diff --git a/nextjs/docs/going-to-production.md b/nextjs/docs/going-to-production.md
new file mode 100644
index 0000000000..55d94ef2b5
--- /dev/null
+++ b/nextjs/docs/going-to-production.md
@@ -0,0 +1,129 @@
+---
+description: Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
+---
+
+# Going to Production
+
+Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.
+
+## In General
+
+- Use [caching](#caching) wherever possible.
+- Ensure your database and backend are deployed in the same region.
+- Aim to ship the least amount of JavaScript possible.
+- Defer loading heavy JavaScript bundles until needed.
+- Ensure [logging](#logging) is set up.
+- Ensure [error handling](#error-handling) is set up.
+- Configure the [404](/docs/advanced-features/custom-error-page.md#404-page) (Not Found) and [500](/docs/advanced-features/custom-error-page.md#500-page) (Error) pages.
+- Ensure you are [measuring performance](/docs/advanced-features/measuring-performance.md).
+- 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/basic-features/supported-browsers-features.md).
+- Improve performance using:
+ - [`next/image` and Automatic Image Optimization](/docs/basic-features/image-optimization.md)
+ - [Automatic Font Optimization](/docs/basic-features/font-optimization.md)
+ - [Script Optimization](/docs/basic-features/script.md)
+
+## Caching
+
+
+ Examples
+
+
+
+Caching improves response times and reduces the number of requests to external services. Next.js automatically adds caching headers to immutable assets served from `/_next/static` including JavaScript, CSS, static images, and other media.
+
+```
+Cache-Control: public, max-age=31536000, immutable
+```
+
+`Cache-Control` headers set in `next.config.js` will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](/docs/basic-features/pages.md#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) function. If you're using `next/image`, there are also [specific caching rules](/docs/basic-features/image-optimization.md#caching) for the default Image Optimization loader.
+
+**Note:** When running your application locally with `next dev`, your headers are overwritten to prevent caching locally.
+
+```
+Cache-Control: no-cache, no-store, max-age=0, must-revalidate
+```
+
+You can also use caching headers inside `getServerSideProps` and API Routes for dynamic responses. For example, using [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/).
+
+```jsx
+// This value is considered fresh for ten seconds (s-maxage=10).
+// If a request is repeated within the next 10 seconds, the previously
+// cached value will still be fresh. If the request is repeated before 59 seconds,
+// the cached value will be stale but still render (stale-while-revalidate=59).
+//
+// In the background, a revalidation request will be made to populate the cache
+// with a fresh value. If you refresh the page, you will see the new value.
+export async function getServerSideProps({ req, res }) {
+ res.setHeader(
+ 'Cache-Control',
+ 'public, s-maxage=10, stale-while-revalidate=59'
+ )
+
+ return {
+ props: {},
+ }
+}
+```
+
+> **Note:** Your deployment provider must support edge caching for dynamic responses. If you are self-hosting, you will need to add this logic to the edge yourself using a key/value store. If you are using Vercel, [edge caching works without configuration](https://vercel.com/docs/edge-network/caching).
+
+## Reducing JavaScript Size
+
+
+ Examples
+
+
+
+To reduce the amount of JavaScript sent to the browser, you can use the following tools to understand what is included inside each JavaScript bundle:
+
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) – Display the size of the imported package inside VSCode.
+- [Package Phobia](https://packagephobia.com/) – Find the cost of adding a new dev dependency to your project.
+- [Bundle Phobia](https://bundlephobia.com/) - Analyze how much a dependency can increase bundle sizes.
+- [Webpack Bundle Analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) – Visualize size of webpack output files with an interactive, zoomable treemap.
+
+Each file inside your `pages/` directory will automatically be code split into its own JavaScript bundle during `next build`. You can also use [Dynamic Imports](/docs/advanced-features/dynamic-import.md) to lazy-load components and libraries. For example, you might want to defer loading your modal code until a user clicks the open button.
+
+## Logging
+
+
+ Examples
+
+
+
+Since Next.js runs on both the client and server, there are multiple forms of logging supported:
+
+- `console.log` in the browser
+- `stdout` on the server
+
+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#logging) compatible with Next.js.
+
+## Error Handling
+
+
+ Examples
+
+
+
+When an unhandled exception occurs, you can control the experience for your users with the [500 page](/docs/advanced-features/custom-error-page.md#500-page). We recommend customizing this to your brand instead of the default Next.js theme.
+
+You can also log and track exceptions with a tool like Sentry. [This example](https://github.com/vercel/next.js/tree/canary/examples/with-sentry) shows how to catch & report errors on both the client and server-side, using the Sentry SDK for Next.js. There's also a [Sentry integration for Vercel](https://vercel.com/integrations/sentry).
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+
diff --git a/nextjs/docs/manifest.json b/nextjs/docs/manifest.json
new file mode 100644
index 0000000000..f49ec789bb
--- /dev/null
+++ b/nextjs/docs/manifest.json
@@ -0,0 +1,392 @@
+{
+ "routes": [
+ {
+ "title": "Documentation",
+ "heading": true,
+ "routes": [
+ { "title": "Getting Started", "path": "/docs/getting-started.md" },
+ {
+ "title": "Basic Features",
+ "open": true,
+ "routes": [
+ {
+ "title": "Pages",
+ "path": "/docs/basic-features/pages.md"
+ },
+ {
+ "title": "Data Fetching",
+ "path": "/docs/basic-features/data-fetching.md"
+ },
+ {
+ "title": "Built-in CSS Support",
+ "path": "/docs/basic-features/built-in-css-support.md"
+ },
+ {
+ "title": "Layouts",
+ "path": "/docs/basic-features/layouts.md"
+ },
+ {
+ "title": "Image Optimization",
+ "path": "/docs/basic-features/image-optimization.md"
+ },
+ {
+ "title": "Font Optimization",
+ "path": "/docs/basic-features/font-optimization.md"
+ },
+ {
+ "title": "Script Optimization",
+ "path": "/docs/basic-features/script.md"
+ },
+ {
+ "title": "Static File Serving",
+ "path": "/docs/basic-features/static-file-serving.md"
+ },
+ {
+ "title": "Fast Refresh",
+ "path": "/docs/basic-features/fast-refresh.md"
+ },
+ {
+ "title": "ESLint",
+ "path": "/docs/basic-features/eslint.md"
+ },
+ {
+ "title": "TypeScript",
+ "path": "/docs/basic-features/typescript.md"
+ },
+ {
+ "title": "Environment Variables",
+ "path": "/docs/basic-features/environment-variables.md"
+ },
+ {
+ "title": "Supported Browsers and Features",
+ "path": "/docs/basic-features/supported-browsers-features.md"
+ }
+ ]
+ },
+ {
+ "title": "Routing",
+ "routes": [
+ {
+ "title": "Introduction",
+ "path": "/docs/routing/introduction.md"
+ },
+ {
+ "title": "Dynamic Routes",
+ "path": "/docs/routing/dynamic-routes.md"
+ },
+ {
+ "title": "Imperatively",
+ "path": "/docs/routing/imperatively.md"
+ },
+ {
+ "title": "Shallow Routing",
+ "path": "/docs/routing/shallow-routing.md"
+ }
+ ]
+ },
+ {
+ "title": "API Routes",
+ "routes": [
+ {
+ "title": "Introduction",
+ "path": "/docs/api-routes/introduction.md"
+ },
+ {
+ "title": "Dynamic API Routes",
+ "path": "/docs/api-routes/dynamic-api-routes.md"
+ },
+ {
+ "title": "API Middlewares",
+ "path": "/docs/api-routes/api-middlewares.md"
+ },
+ {
+ "title": "Response Helpers",
+ "path": "/docs/api-routes/response-helpers.md"
+ }
+ ]
+ },
+ {
+ "title": "Going to Production",
+ "path": "/docs/going-to-production.md"
+ },
+ {
+ "title": "Deployment",
+ "path": "/docs/deployment.md"
+ },
+ {
+ "title": "Authentication",
+ "path": "/docs/authentication.md"
+ },
+ {
+ "title": "Advanced Features",
+ "routes": [
+ {
+ "title": "Preview Mode",
+ "path": "/docs/advanced-features/preview-mode.md"
+ },
+ {
+ "title": "Dynamic Import",
+ "path": "/docs/advanced-features/dynamic-import.md"
+ },
+ {
+ "title": "Automatic Static Optimization",
+ "path": "/docs/advanced-features/automatic-static-optimization.md"
+ },
+ {
+ "title": "Static HTML Export",
+ "path": "/docs/advanced-features/static-html-export.md"
+ },
+ {
+ "title": "Absolute Imports and Module Path Aliases",
+ "path": "/docs/advanced-features/module-path-aliases.md"
+ },
+ {
+ "title": "AMP Support",
+ "routes": [
+ {
+ "title": "Introduction",
+ "path": "/docs/advanced-features/amp-support/introduction.md"
+ },
+ {
+ "title": "Adding AMP Components",
+ "path": "/docs/advanced-features/amp-support/adding-amp-components.md"
+ },
+ {
+ "title": "AMP Validation",
+ "path": "/docs/advanced-features/amp-support/amp-validation.md"
+ },
+ {
+ "title": "AMP in Static HTML export",
+ "path": "/docs/advanced-features/amp-support/amp-in-static-html-export.md"
+ },
+ {
+ "title": "TypeScript",
+ "path": "/docs/advanced-features/amp-support/typescript.md"
+ }
+ ]
+ },
+ {
+ "title": "Customizing Babel Config",
+ "path": "/docs/advanced-features/customizing-babel-config.md"
+ },
+ {
+ "title": "Customizing PostCSS Config",
+ "path": "/docs/advanced-features/customizing-postcss-config.md"
+ },
+ {
+ "title": "Custom Server",
+ "path": "/docs/advanced-features/custom-server.md"
+ },
+ {
+ "title": "Custom `App`",
+ "path": "/docs/advanced-features/custom-app.md"
+ },
+ {
+ "title": "Custom `Document`",
+ "path": "/docs/advanced-features/custom-document.md"
+ },
+ {
+ "title": "Custom Error Page",
+ "path": "/docs/advanced-features/custom-error-page.md"
+ },
+ {
+ "title": "`src` Directory",
+ "path": "/docs/advanced-features/src-directory.md"
+ },
+ {
+ "title": "Multi Zones",
+ "path": "/docs/advanced-features/multi-zones.md"
+ },
+ {
+ "title": "Measuring performance",
+ "path": "/docs/advanced-features/measuring-performance.md"
+ },
+ {
+ "title": "Debugging",
+ "path": "/docs/advanced-features/debugging.md"
+ },
+ {
+ "title": "Source Maps",
+ "path": "/docs/advanced-features/source-maps.md"
+ },
+ {
+ "title": "Codemods",
+ "path": "/docs/advanced-features/codemods.md"
+ },
+ {
+ "title": "Internationalized Routing",
+ "path": "/docs/advanced-features/i18n-routing.md"
+ },
+ {
+ "title": "Security Headers",
+ "path": "/docs/advanced-features/security-headers.md"
+ }
+ ]
+ },
+ {
+ "title": "Upgrade Guide",
+ "path": "/docs/upgrading.md"
+ },
+ {
+ "title": "Migrating to Next.js",
+ "routes": [
+ {
+ "title": "Incrementally Adopting Next.js",
+ "path": "/docs/migrating/incremental-adoption.md"
+ },
+ {
+ "title": "Migrating from Gatsby",
+ "path": "/docs/migrating/from-gatsby.md"
+ },
+ {
+ "title": "Migrating from Create React App",
+ "path": "/docs/migrating/from-create-react-app.md"
+ },
+ {
+ "title": "Migrating from React Router",
+ "path": "/docs/migrating/from-react-router.md"
+ }
+ ]
+ },
+ { "title": "FAQ", "path": "/docs/faq.md" }
+ ]
+ },
+ {
+ "title": "API Reference",
+ "heading": true,
+ "routes": [
+ { "title": "CLI", "path": "/docs/api-reference/cli.md" },
+ {
+ "title": "Create Next App",
+ "path": "/docs/api-reference/create-next-app.md"
+ },
+ {
+ "title": "next/router",
+ "path": "/docs/api-reference/next/router.md"
+ },
+ {
+ "title": "next/link",
+ "path": "/docs/api-reference/next/link.md"
+ },
+ {
+ "title": "next/image",
+ "path": "/docs/api-reference/next/image.md"
+ },
+ {
+ "title": "next/head",
+ "path": "/docs/api-reference/next/head.md"
+ },
+ {
+ "title": "next/amp",
+ "path": "/docs/api-reference/next/amp.md"
+ },
+ {
+ "title": "Data Fetching",
+ "routes": [
+ {
+ "title": "getInitialProps",
+ "path": "/docs/api-reference/data-fetching/getInitialProps.md"
+ }
+ ]
+ },
+ {
+ "title": "Static Optimization Indicator",
+ "path": "/docs/api-reference/next.config.js/static-optimization-indicator.md"
+ },
+ {
+ "title": "next.config.js",
+ "routes": [
+ {
+ "title": "Introduction",
+ "path": "/docs/api-reference/next.config.js/introduction.md"
+ },
+ {
+ "title": "Environment Variables",
+ "path": "/docs/api-reference/next.config.js/environment-variables.md"
+ },
+ {
+ "title": "Base Path",
+ "path": "/docs/api-reference/next.config.js/basepath.md"
+ },
+ {
+ "title": "Rewrites",
+ "path": "/docs/api-reference/next.config.js/rewrites.md"
+ },
+ {
+ "title": "Redirects",
+ "path": "/docs/api-reference/next.config.js/redirects.md"
+ },
+ {
+ "title": "Custom Headers",
+ "path": "/docs/api-reference/next.config.js/headers.md"
+ },
+ {
+ "title": "Custom Page Extensions",
+ "path": "/docs/api-reference/next.config.js/custom-page-extensions.md"
+ },
+ {
+ "title": "CDN Support with Asset Prefix",
+ "path": "/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md"
+ },
+ {
+ "title": "Custom Webpack Config",
+ "path": "/docs/api-reference/next.config.js/custom-webpack-config.md"
+ },
+ {
+ "title": "Compression",
+ "path": "/docs/api-reference/next.config.js/compression.md"
+ },
+ {
+ "title": "Runtime Configuration",
+ "path": "/docs/api-reference/next.config.js/runtime-configuration.md"
+ },
+ {
+ "title": "Disabling x-powered-by",
+ "path": "/docs/api-reference/next.config.js/disabling-x-powered-by.md"
+ },
+ {
+ "title": "Disabling ETag Generation",
+ "path": "/docs/api-reference/next.config.js/disabling-etag-generation.md"
+ },
+ {
+ "title": "Disabling HTTP Keep-Alive",
+ "path": "/docs/api-reference/next.config.js/disabling-http-keep-alive.md"
+ },
+ {
+ "title": "Setting a custom build directory",
+ "path": "/docs/api-reference/next.config.js/setting-a-custom-build-directory.md"
+ },
+ {
+ "title": "Configuring the Build ID",
+ "path": "/docs/api-reference/next.config.js/configuring-the-build-id.md"
+ },
+ {
+ "title": "Configuring onDemandEntries",
+ "path": "/docs/api-reference/next.config.js/configuring-onDemandEntries.md"
+ },
+ {
+ "title": "Ignoring ESLint",
+ "path": "/docs/api-reference/next.config.js/ignoring-eslint.md"
+ },
+ {
+ "title": "Ignoring TypeScript Errors",
+ "path": "/docs/api-reference/next.config.js/ignoring-typescript-errors.md"
+ },
+ {
+ "title": "exportPathMap",
+ "path": "/docs/api-reference/next.config.js/exportPathMap.md"
+ },
+ {
+ "title": "Trailing Slash",
+ "path": "/docs/api-reference/next.config.js/trailing-slash.md"
+ },
+ {
+ "title": "React Strict Mode",
+ "path": "/docs/api-reference/next.config.js/react-strict-mode.md"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
diff --git a/nextjs/docs/migrating/from-create-react-app.md b/nextjs/docs/migrating/from-create-react-app.md
new file mode 100644
index 0000000000..7fe79aff93
--- /dev/null
+++ b/nextjs/docs/migrating/from-create-react-app.md
@@ -0,0 +1,239 @@
+---
+description: Learn how to transition an existing Create React App project to Next.js.
+---
+
+# Migrating from Create React App
+
+This guide will help you understand how to transition from an existing non-ejected Create React App project to Next.js. Migrating to Next.js will allow you to:
+
+- Choose which [data fetching](/docs/basic-features/data-fetching.md) strategy you want on a per-page basis.
+- Use [Incremental Static Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration) to update _existing_ pages by re-rendering them in the background as traffic comes in.
+- Use [API Routes](/docs/api-routes/introduction.md).
+
+And more! Let’s walk through a series of steps to complete the migration.
+
+## Updating `package.json` and dependencies
+
+The first step towards migrating to Next.js is to update `package.json` and dependencies. You should:
+
+- Remove `react-scripts` (but keep `react` and `react-dom`). If you're using React Router, you can also remove `react-router-dom`.
+- Install `next`.
+- Add Next.js related commands to `scripts`. One is `next dev`, which runs a development server at `localhost:3000`. You should also add `next build` and `next start` for creating and starting a production build.
+
+Here's an example `package.json`:
+
+```json
+{
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "next": "latest",
+ "react": "latest",
+ "react-dom": "latest"
+ }
+}
+```
+
+## Static Assets and Compiled Output
+
+Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder), whereas Next.js uses it for static assets. It's possible to add static assets here, but Create React App recommends importing them directly from JavaScript files.
+
+- Move any images, fonts, or other static assets to `public`.
+- Convert `index.html` (the entry point of your application) to Next.js. Any `` code should be moved to a [custom `_document.js`](/docs/advanced-features/custom-document.md). Any shared layout between all pages should be moved to a [custom `_app.js`](/docs/advanced-features/custom-app.md).
+- See [Styling](#styling) for CSS/Sass files.
+- Add `.next` to `.gitignore`.
+
+## Creating Routes & Linking
+
+With Create React App, you're likely using React Router. Instead of using a third-party library, Next.js includes its own [file-system based routing](/docs/routing/introduction.md).
+
+- Convert all `Route` components to new files in the `pages` directory.
+- For routes that require dynamic content (e.g. `/blog/:slug`), you can use [Dynamic Routes](/docs/routing/dynamic-routes.md) with Next.js (e.g. `pages/blog/[slug].js`). The value of `slug` is accessible through a [query parameter](/docs/routing/dynamic-routes.md). For example, the route `/blog/first-post` would forward the query object `{ 'slug': 'first-post' }` to `pages/blog/[slug].js` ([learn more here](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation)).
+
+For more information, see [Migrating from React Router](/docs/migrating/from-react-router.md).
+
+## Styling
+
+Next.js has built-in support for [CSS](/docs/basic-features/built-in-css-support.md), [Sass](/docs/basic-features/built-in-css-support.md#sass-support) and [CSS-in-JS](/docs/basic-features/built-in-css-support.md#css-in-js).
+
+With Create React App, you can import `.css` files directly inside React components. Next.js allows you to do the same, but requires these files to be [CSS Modules](/docs/basic-features/built-in-css-support.md). For global styles, you'll need a [custom `_app.js`](/docs/advanced-features/custom-app.md) to add a [global stylesheet](docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet).
+
+## Safely Accessing Web APIs
+
+With client-side rendered applications (like Create React App), you can access `window`, `localStorage`, `navigator`, and other [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) out of the box.
+
+Since Next.js uses [pre-rendering](/docs/basic-features/pages.md#pre-rendering), you'll need to safely access those Web APIs only when you're on the client-side. For example, the following code snippet will allow access to `window` only on the client-side.
+
+```jsx
+if (typeof window !== 'undefined') {
+ // You now have access to `window`
+}
+```
+
+A recommended way of accessing Web APIs safely is by using the [`useEffect`](https://reactjs.org/docs/hooks-effect.html) hook, which only executes client-side:
+
+```jsx
+import { useEffect } from 'react'
+
+useEffect(() => {
+ // You now have access to `window`
+}, [])
+```
+
+## Image Component and Image Optimization
+
+Since version **10.0.0**, Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
+
+The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `
` element, evolved for the modern web.
+
+The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like [WebP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
+
+Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Your build times aren't increased, whether shipping 10 images or 10 million images.
+
+```jsx
+import Image from 'next/image'
+
+export default function Home() {
+ return (
+ <>
+ My Homepage
+
+ Welcome to my homepage!
+ >
+ )
+}
+```
+
+## Environment Variables
+
+Next.js has support for `.env` [Environment Variables](/docs/basic-features/environment-variables.md) similar to Create React App. The main different is the prefix used to expose environment variables on the client-side.
+
+- Change all environment variables with the `REACT_APP_` prefix to `NEXT_PUBLIC_`.
+- Server-side environment variables will be available at build-time and in [API Routes](/docs/api-routes/introduction.md).
+
+## Search Engine Optimization
+
+Most Create React App examples use `react-helmet` to assist with adding `meta` tags for proper SEO. With Next.js, we use [`next/head`](/docs/api-reference/next/head.md) to add `meta` tags to your `` element. For example, here's an SEO component with Create React App:
+
+```jsx
+// src/components/seo.js
+
+import { Helmet } from 'react-helmet'
+
+export default function SEO({ description, title, siteTitle }) {
+ return (
+