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 Steps component to from-nextjs.mdx #8117

Merged
merged 1 commit into from
May 2, 2024
Merged

Add Steps component to from-nextjs.mdx #8117

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Add Steps component to from-nextjs.mdx
  • Loading branch information
@Egpereira
Egpereira committed May 1, 2024
commit 8af703548e40dd028d30dbdb35eb278122478482
65 changes: 35 additions & 30 deletions src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ stub: false
framework: Next.js
i18nReady: true
---
import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Here are some key concepts and migration strategies to help you get started. Use the rest of our docs and our [Discord community](https://astro.build/chat) to keep going!

Expand Down Expand Up @@ -37,6 +38,7 @@ When you rebuild your Next.js site in Astro, you will notice some important diff
Each project migration will look different, but there are some common actions you will perform when converting from Next.js to Astro.

### Create a new Astro project

Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes).

You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install/auto/#starter-templates).
Expand Down Expand Up @@ -89,14 +91,15 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu

Following [Astro's project structure](/en/basics/project-structure/):

<Steps>
1. **Keep** Next's `public/` folder untouched.

Astro uses the `public/` directory for static assets, just like Next. There is no change needed to this folder, nor its contents.

2. **Copy or Move** Next's other files and folders (e.g. `pages`, `styles` etc.) into Astro's `src/` folder as you rebuild your site, following [Astro's project structure](/en/basics/project-structure/).

Like Next, Astro's `src/pages/` folder is a special folder used for file-based routing. All other folders are optional, and you can organize the contents of your `src/` folder any way you like. Other common folders in Astro projects include `src/layouts/`, `src/components`, `src/styles`, `src/scripts`.

</Steps>

### The Astro config file

Expand All @@ -110,13 +113,13 @@ Here are some tips for converting a Next `.js` component into a `.astro` compone

2. Change any [Next or JSX syntax to Astro](#reference-convert-nextjs-syntax-to-astro) or to HTML web standards. This includes `<Link>`, `<Script>`, `{children}`, and `className`, for example.

1. Move any necessary JavaScript, including import statements, into a ["code fence" (`---`)](/en/basics/astro-components/#the-component-script). Note: JavaScript to [conditionally render content](/en/basics/astro-syntax/#dynamic-html) is often written inside the HTML template directly in Astro.
3. Move any necessary JavaScript, including import statements, into a ["code fence" (`---`)](/en/basics/astro-components/#the-component-script). Note: JavaScript to [conditionally render content](/en/basics/astro-syntax/#dynamic-html) is often written inside the HTML template directly in Astro.

4. Use [`Astro.props`](/en/reference/api-reference/#astroprops) to access any additional props that were previously passed to your Next function.

4. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
5. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!

4. Replace `getStaticProps()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.
6. Replace `getStaticProps()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.

See [an example of a Next `.js` file converted step-by-step](#guided-example-next-data-fetching-to-astro).

Expand Down Expand Up @@ -239,22 +242,22 @@ export default class MyDocument extends Document {
}
}
```

<Steps>
1. Make a new Astro layout file using only the returned JSX.

2. Replace any React components with `<html>`, `<head>`, `<slot>`, and other HTML standard tags.


```astro title="src/layouts/Document.astro"
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<slot/>
</body>
</html>
```
```astro title="src/layouts/Document.astro"
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<slot/>
</body>
</html>
```
</Steps>

#### Migrating from Next.js' `/app` directory

Expand All @@ -280,20 +283,22 @@ export default function Head() {
}
```

<Steps>
1. Make a new Astro layout file using only the returned JSX.

2. Replace both these files with a single Astro layout file that contains a page shell (`<html>`, `<head>`, and `<body>` tags) and a `<slot/>` instead of React's `{children}` prop:

```astro title="src/layouts/Layout.astro"
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<slot/>
</body>
</html>
```
```astro title="src/layouts/Layout.astro"
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<slot/>
</body>
</html>
```
</Steps>

### Migrating Pages and Posts

Expand Down Expand Up @@ -434,8 +439,6 @@ In React (`.jsx`) components, use standard JSX image syntax (`<img />`). Astro w

You can learn more about [using images in Astro](/en/guides/images/) in the Images Guide.



## Guided example: Next data fetching to Astro

Here is an example of Next.js Pokédex data fetch converted to Astro.
Expand All @@ -444,6 +447,7 @@ Here is an example of Next.js Pokédex data fetch converted to Astro.

Here's how to recreate that in `src/pages/index.astro`, replacing `getStaticProps()` with `fetch()`.

<Steps>
1. Identify the return() JSX.

```jsx title="pages/index.js" {6-18}
Expand Down Expand Up @@ -562,6 +566,7 @@ Here's how to recreate that in `src/pages/index.astro`, replacing `getStaticProp
</ul>
</Layout>
```
</Steps>

## Community Resources

Expand Down
Loading