Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add instructions to create pages directory and add an index.js file to it #35971

Merged
merged 14 commits into from Apr 15, 2022
Merged

Add instructions to create pages directory and add an index.js file to it #35971

Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9d52d6e
Update from-create-react-app.md
amandeepmittal Apr 7, 2022
93485f0
Update from-create-react-app.md
amandeepmittal Apr 7, 2022
2ce161a
Merge branch 'canary' into update-migration-create-react-app
amandeepmittal Apr 7, 2022
bbee0f5
Fix typo
amandeepmittal Apr 7, 2022
ecd32f0
Merge branch 'update-migration-create-react-app' of https://github.co…
amandeepmittal Apr 7, 2022
dbbe969
Update docs/migrating/from-create-react-app.md
amandeepmittal Apr 7, 2022
a47729c
Update docs/migrating/from-create-react-app.md
amandeepmittal Apr 7, 2022
ff3107f
Update from-create-react-app.md
amandeepmittal Apr 8, 2022
8d00bb9
fix lint-language issue
amandeepmittal Apr 11, 2022
559dae2
Update .alexrc
amandeepmittal Apr 12, 2022
6b11479
Update docs/migrating/from-create-react-app.md
amandeepmittal Apr 12, 2022
5bbb587
Update from-create-react-app.md
amandeepmittal Apr 13, 2022
3572fc8
Update docs/migrating/from-create-react-app.md
amandeepmittal Apr 13, 2022
f68ce2f
Merge branch 'canary' into update-migration-create-react-app
amandeepmittal Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/migrating/from-create-react-app.md
View file
Open in desktop
Expand Up @@ -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 application, this directory is kept at the root of your application.
amandeepmittal marked this conversation as resolved.
Show resolved Hide resolved
amandeepmittal marked this conversation as resolved.
Show resolved Hide resolved
- 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).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this say something about converting public/index.html to pages/index.js?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do that on line 54.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point. I'll change the instruction to say that move the index.js file to pages directory.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot how CRA is formatted so I just did npx create-react-app@latest and here's what I found:

  • CRA src/index.js seems to be similar to Next.js pages/_document.js
  • CRA src/App.js seems to similar to Next.js pages/index.js
  • CRA public/index.html seems to be similar to Next.js pages/_document.js or perhaps a layout in pages/_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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

- See [Styling](#styling) for CSS/Sass files.
- Add `.next` to `.gitignore`.
Expand All @@ -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 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)).

For more information, see [Migrating from React Router](/docs/migrating/from-react-router.md).
Expand Down