Add instructions to create pages directory and add an index.js file to it #35971
+6
−3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
amandeepmittal
requested review from
timneutkens,
ijjk,
shuding,
styfle,
huozhi,
padmaia and
leerob
as code owners
…m/amandeepmittal/next.js into update-migration-create-react-app
leerob
reviewed
Apr 7, 2022
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Lee Robinson <me@leerob.io>
styfle
reviewed
Apr 7, 2022
molebox
requested changes
Apr 8, 2022
|
Could you fix the linting issues @amandeepmittal 👍 |
|
@balazsorban44, fixed it! |
styfle
reviewed
Apr 11, 2022
styfle
reviewed
Apr 11, 2022
| @@ -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), 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 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 `<head>` 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). | |||
There was a problem hiding this comment.
Should this say something about converting public/index.html to pages/index.js?
There was a problem hiding this comment.
We do that on line 54.
There was a problem hiding this comment.
I think line 54 is a bit confusing because its saying "create an index.js file" but CRA already has an index file so I think renaming/converting is better?
There was a problem hiding this comment.
That's a good point. I'll change the instruction to say that move the index.js file to pages directory.
There was a problem hiding this comment.
I forgot how CRA is formatted so I just did npx create-react-app@latest and here's what I found:
- CRA
src/index.jsseems to be similar to Next.jspages/_document.js - CRA
src/App.jsseems to similar to Next.jspages/index.js - CRA
public/index.htmlseems to be similar to Next.jspages/_document.jsor perhaps a layout inpages/_app.js
The problem I'm finding is that CRA doesn't come with a router so its almost impossible to give clear instructions here since only the user understand their own CRA application.
There was a problem hiding this comment.
To tackle the problem of routing, I think we do mention that Next.js has a file system based routing and provide a link for the developer to go through the link and also a link for migrating from react-router.
If we want to add conceptual information by explaining how routing works with Next.js and things they might need to go through when migrating, then we can add more information to the guide and provide basic code snippets (or not). I am not sure how Next.js team feels about adding in-depth information in this guide.
Co-authored-by: Steven <steven@ceriously.com>
Stats from current PRDefault Build (Decrease detected ✓)General
Page Load Tests Overall decrease
|
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.095 | 3.132 | |
| / avg req/sec | 807.67 | 798.29 | |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.212 | 1.27 | |
| /error-in-render avg req/sec | 2063 | 1969.26 |
Client Bundles (main, webpack)
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| 925.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42 kB | 42 kB | ✓ |
| main-HASH.js gzip | 28.3 kB | 28.3 kB | ✓ |
| webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
| Overall change | 72 kB | 72 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.36 kB | 1.36 kB | ✓ |
| _error-HASH.js gzip | 192 B | 192 B | ✓ |
| amp-HASH.js gzip | 309 B | 309 B | ✓ |
| css-HASH.js gzip | 327 B | 327 B | ✓ |
| dynamic-HASH.js gzip | 3.05 kB | 3.05 kB | ✓ |
| head-HASH.js gzip | 351 B | 351 B | ✓ |
| hooks-HASH.js gzip | 920 B | 920 B | ✓ |
| image-HASH.js gzip | 5.73 kB | 5.73 kB | ✓ |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 2.36 kB | 2.36 kB | ✓ |
| routerDirect..HASH.js gzip | 320 B | 320 B | ✓ |
| script-HASH.js gzip | 392 B | 392 B | ✓ |
| withRouter-HASH.js gzip | 319 B | 319 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 16 kB | 16 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 460 B | 460 B | ✓ |
| Overall change | 460 B | 460 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| index.html gzip | 531 B | 531 B | ✓ |
| link.html gzip | 545 B | 545 B | ✓ |
| withRouter.html gzip | 525 B | 525 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB | ✓ |
Default Build with SWC (Decrease detected ✓)
General
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| buildDuration | 18.8s | 18.7s | -87ms |
| buildDurationCached | 6.2s | 6.1s | -52ms |
| nodeModulesSize | 484 MB | 484 MB | ✓ |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.104 | 3.091 | -0.01 |
| / avg req/sec | 805.5 | 808.68 | +3.18 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.246 | 1.265 | |
| /error-in-render avg req/sec | 2006.9 | 1976.07 |
Client Bundles (main, webpack)
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| 925.HASH.js gzip | 178 B | 178 B | ✓ |
| framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
| main-HASH.js gzip | 28.7 kB | 28.7 kB | ✓ |
| webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
| Overall change | 72.6 kB | 72.6 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
| _error-HASH.js gzip | 179 B | 179 B | ✓ |
| amp-HASH.js gzip | 313 B | 313 B | ✓ |
| css-HASH.js gzip | 325 B | 325 B | ✓ |
| dynamic-HASH.js gzip | 3.03 kB | 3.03 kB | ✓ |
| head-HASH.js gzip | 351 B | 351 B | ✓ |
| hooks-HASH.js gzip | 921 B | 921 B | ✓ |
| image-HASH.js gzip | 5.77 kB | 5.77 kB | ✓ |
| index-HASH.js gzip | 261 B | 261 B | ✓ |
| link-HASH.js gzip | 2.44 kB | 2.44 kB | ✓ |
| routerDirect..HASH.js gzip | 322 B | 322 B | ✓ |
| script-HASH.js gzip | 393 B | 393 B | ✓ |
| withRouter-HASH.js gzip | 317 B | 317 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 16.1 kB | 16.1 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 458 B | 458 B | ✓ |
| Overall change | 458 B | 458 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | amandeepmittal/next.js update-migration-create-react-app | Change | |
|---|---|---|---|
| index.html gzip | 532 B | 532 B | ✓ |
| link.html gzip | 546 B | 546 B | ✓ |
| withRouter.html gzip | 526 B | 526 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB | ✓ |
styfle
previously approved these changes
Apr 12, 2022
styfle
reviewed
Apr 13, 2022
Co-authored-by: Steven <steven@ceriously.com>
styfle
approved these changes
Apr 13, 2022
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds instructions in the Create React App migration guide to create a
pagesdirectory and add anindex.jsfile to it.Bug
contributing.mdFeature
fixes #numbercontributing.mdDocumentation / Examples
yarn lint