From 9d52d6e512fa0411da1cc4ed5c3f13d126af1172 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Thu, 7 Apr 2022 17:52:19 +0530 Subject: [PATCH 01/11] Update from-create-react-app.md --- docs/migrating/from-create-react-app.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 54bf69da832a..05033aef6def 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -50,7 +50,9 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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. +- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of the application. +- Then create a [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file be the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. +- Convert all other `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/get-static-paths.md)). For more information, see [Migrating from React Router](/docs/migrating/from-react-router.md). From 93485f0671f81415744cb21ff0763e0a536541cf Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Thu, 7 Apr 2022 17:54:55 +0530 Subject: [PATCH 02/11] Update from-create-react-app.md --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 05033aef6def..5c6610b8b684 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -41,7 +41,7 @@ Here's an example `package.json`: 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`. +- Move any images, fonts, or other static assets to `public`. In a Next.js app, this directory is kept at the root of your application. - 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`. From bbee0f5e60c262dc26055476861e12e750930b6a Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Thu, 7 Apr 2022 17:55:57 +0530 Subject: [PATCH 03/11] Fix typo --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 5c6610b8b684..fbf1ab31ba7b 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -41,7 +41,7 @@ Here's an example `package.json`: 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`. In a Next.js app, this directory is kept at the root of your application. +- Move any images, fonts, or other static assets to `public`. In a Next.js application, this directory is kept at the root of your application. - 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`. From dbbe969fd78ab7556eb48295cda5068cd8df7795 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Thu, 7 Apr 2022 19:32:07 +0530 Subject: [PATCH 04/11] Update docs/migrating/from-create-react-app.md Co-authored-by: Lee Robinson --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index fbf1ab31ba7b..81600c453195 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -51,7 +51,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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). - Create a [`pages`](/docs/basic-features/pages.md) directory at the root of the application. -- Then create a [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file be the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. +- Then, create an [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. - Convert all other `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/get-static-paths.md)). From a47729c8779e19b08406f94210360ca0d2520953 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Thu, 7 Apr 2022 19:32:13 +0530 Subject: [PATCH 05/11] Update docs/migrating/from-create-react-app.md Co-authored-by: Lee Robinson --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 81600c453195..bdc247464dfa 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -50,7 +50,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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). -- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of the application. +- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your application. - Then, create an [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. - Convert all other `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/get-static-paths.md)). From ff3107ff1e9b578a00e434ddba31d412ec778bf7 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Fri, 8 Apr 2022 14:50:27 +0530 Subject: [PATCH 06/11] Update from-create-react-app.md --- docs/migrating/from-create-react-app.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index bdc247464dfa..6bd75b4b704d 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -39,9 +39,9 @@ Here's an example `package.json`: ## 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. +Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder). It is located at the project's root. Next.js uses it for static assets. When migrating from Create React App, the location of the `public` directory remains same. It's possible to add static assets in this directory, but Create React App recommends importing them directly from JavaScript files. -- Move any images, fonts, or other static assets to `public`. In a Next.js application, this directory is kept at the root of your application. +- 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`. @@ -50,7 +50,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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). -- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your application. +- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your project. - Then, create an [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. - Convert all other `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/get-static-paths.md)). From 8d00bb9e60a2e91799b94b4dbfa889fab6f31bef Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Mon, 11 Apr 2022 16:19:18 +0530 Subject: [PATCH 07/11] fix lint-language issue --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 6bd75b4b704d..aeca1a4eb128 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -39,7 +39,7 @@ Here's an example `package.json`: ## 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). It is located at the project's root. Next.js uses it for static assets. When migrating from Create React App, the location of the `public` directory remains same. It's possible to add static assets in this directory, but Create React App recommends importing them directly from JavaScript files. +Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder). It is located at the project's root. Next.js uses it for static assets. When migrating from Create React App, the location of the `public` directory is the same. It's possible to add static assets in this directory, 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). From 559dae244c82665de377d1e1cb4445aac47589bb Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 12 Apr 2022 20:35:23 +0530 Subject: [PATCH 08/11] Update .alexrc --- .alexrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.alexrc b/.alexrc index 157d1da8cca5..47862f2c80a1 100644 --- a/.alexrc +++ b/.alexrc @@ -16,6 +16,7 @@ "hook", "hooks", "host-hostess", - "invalid" + "invalid", + "remains" ] } From 6b11479a7e41923b598486f850e790546f002f3c Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 12 Apr 2022 20:35:41 +0530 Subject: [PATCH 09/11] Update docs/migrating/from-create-react-app.md Co-authored-by: Steven --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index aeca1a4eb128..d26b63a5197e 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -39,7 +39,7 @@ Here's an example `package.json`: ## 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). It is located at the project's root. Next.js uses it for static assets. When migrating from Create React App, the location of the `public` directory is the same. It's possible to add static assets in this directory, but Create React App recommends importing them directly from JavaScript files. +Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder) as well as static assets, but Next.js only uses it for static assets. When migrating from Create React App, the location of the `public` directory remains the same. - 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). From 5bbb587447be3a1e24cf74faed4b2c58289c4a02 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Wed, 13 Apr 2022 13:09:37 +0530 Subject: [PATCH 10/11] Update from-create-react-app.md --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index d26b63a5197e..16277b9263f6 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -51,7 +51,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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). - Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your project. -- Then, create an [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. +- Then, move the [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. - Convert all other `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/get-static-paths.md)). From 3572fc849c68259fc89d1dbac1d19848b65c7ca0 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Wed, 13 Apr 2022 21:05:12 +0530 Subject: [PATCH 11/11] Update docs/migrating/from-create-react-app.md Co-authored-by: Steven --- docs/migrating/from-create-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md index 16277b9263f6..6e4954107294 100644 --- a/docs/migrating/from-create-react-app.md +++ b/docs/migrating/from-create-react-app.md @@ -51,7 +51,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c 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). - Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your project. -- Then, move the [`index.js`](https://nextjs.org/docs/routing/introduction#index-routes) file inside the `pages` directory. This file is the entry point of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. +- Then, move the `src/App.js` file to `pages/index.js`. This file is the [index page](https://nextjs.org/docs/routing/introduction#index-routes) of your Next.js application. Populate this file with code that is used to display the index route in your Create React App. - Convert all other `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/get-static-paths.md)).