LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-08 12:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: finish article draft

Browse Source
This commit is contained in:
Corbin Crutchley
2023-06-28 23:16:41 -07:00
parent 5880d687ec
commit d3d0a0aa1e
2 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/blog/port-nextjs-to-astro/homepage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 391 KiB

45
content/blog/port-nextjs-to-astro/index.md
View File

@@ -1,8 +1,8 @@
--- ---
{ {
title: 'Port a Next.js Site to Astro', title: 'Porting a Next.js Site to Astro Step-by-Step',
description: '', description: "Let's port a site from Next.js to Astro, expanding on the official migration guide.",
published: '2023-11-26T22:12:03.284Z', published: '2023-06-29T22:12:03.284Z',
authors: ['crutchcorn'], authors: ['crutchcorn'],
tags: ['nextjs', 'react', 'astro'], tags: ['nextjs', 'react', 'astro'],
attached: [], attached: [],
@@ -10,13 +10,23 @@
} }
--- ---
## Guided examples: See the steps! [Astro is a WebDev meta-framework](https://astro.build) that allows you to build highly performant websites, that, out-of-the-box compile down to 0kb of JavaScript in your bundle.
Here are examples of three files from Next's example templates converted to Astro. If your site is a marketing site, or if performance is a substantial concern for your app, it may make sense to migrate from Next.js to Astro - as we [at Unicorn Utterances](https://unicorn-utterances.com) once did.
### Next base layout to Astro While Astro provides a good guide of [how to migrate from Next.js to Astro](https://docs.astro.build/en/guides/migrate-to-astro/from-nextjs/) (written by yours truly!), I felt it would be helpful to see an expanded step-by-step guide on how to migrate a [Pokédex](https://www.pokemon.com/us/pokedex) application from Next.js to Astro.
This example converts the main project layout (`/pages/_document.js`) to `src/layouts/Layout.astro` which receives props from pages on your site. ![A list of the original 150 pokemon with a picture of each](./homepage.png)
> For the full codebase of the Pokédex application, [check the original repo here](https://github.com/crutchcorn/nextjs-pokemon-small-app).
Let's start the migration by changing our layout file to an Astro layout file.
## Next base layout to Astro
To start migrating a Next.js layout file from Next.js to Astro, you'll:
1. Identify the return(). 1. Identify the return().
@@ -73,7 +83,7 @@ This example converts the main project layout (`/pages/_document.js`) to `src/la
3. Import the CSS (found in `_app.js`) 3. Import the CSS (found in `_app.js`)
In addition to the `_document` file, the NextJS application has a `_app.js` file that imports global styling via a CSS import: In addition to the `_document` file, the Next.js application has a `_app.js` file that imports global styling via a CSS import:
```jsx {2} ```jsx {2}
// pages/_app.js // pages/_app.js
@@ -106,9 +116,11 @@ This example converts the main project layout (`/pages/_document.js`) to `src/la
</html> </html>
``` ```
### Convert a Next.js `getStaticProps` Page to Astro ## Convert a Next.js `getStaticProps` Page to Astro
This is a page that lists the first 151 Pokémon using [the REST PokéAPI](https://pokeapi.co/). Next up, let's migrate [Next.js' `getStaticProps` method](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props) to use Astro's data fetching.
We'll start with a Next.js page that lists the first 151 Pokémon using [the REST PokéAPI](https://pokeapi.co/):
```jsx ```jsx
// pages/index.js // pages/index.js
@@ -159,7 +171,7 @@ export const getStaticProps = async () => {
} }
``` ```
#### Move Next Page Templating to Astro ### Move Next Page Templating to Astro
To start migrating this page to Astro, start with the returned JSX and place it within an `.astro` file: To start migrating this page to Astro, start with the returned JSX and place it within an `.astro` file:
@@ -243,9 +255,9 @@ import Layout from '../layouts/layout.astro';
</Layout> </Layout>
``` ```
#### Move Next Page Logic Requests to Astro ### Move Next Page Logic Requests to Astro
This is the `getStaticProps` method from the NextJS page: This is the `getStaticProps` method from the Next.js page:
```jsx ```jsx
export const getStaticProps = async () => { export const getStaticProps = async () => {
@@ -317,7 +329,7 @@ const pokemons = resJson.results.map(pokemon => {
You should now have a fully working Pokédex entries screen. You should now have a fully working Pokédex entries screen.
### Convert a Next.js `getStaticPaths` Page to Astro ## Convert a Next.js `getStaticPaths` Page to Astro
This is a Next.js dynamic page that generates a detail screen for each of the first 151 Pokémon using [the REST PokéAPI](https://pokeapi.co/). This is a Next.js dynamic page that generates a detail screen for each of the first 151 Pokémon using [the REST PokéAPI](https://pokeapi.co/).
@@ -400,7 +412,7 @@ export const getStaticProps = async (context) => {
} }
``` ```
#### Move Next Page Templating to Astro ### Move Next Page Templating to Astro
To start migrating this page to Astro, start with the returned JSX and place it within an `.astro` file: To start migrating this page to Astro, start with the returned JSX and place it within an `.astro` file:
@@ -447,7 +459,7 @@ However, in addition, now:
- [HTML's standard `onclick`](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) function is used to call [the browser's `history.go` function](https://developer.mozilla.org/en-US/docs/Web/API/History/go) to navigate back. - [HTML's standard `onclick`](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) function is used to call [the browser's `history.go` function](https://developer.mozilla.org/en-US/docs/Web/API/History/go) to navigate back.
#### Move Next `getStaticPaths` to Astro ### Move Next `getStaticPaths` to Astro
Astro supports a function called `getStaticPaths` to generate dynamic paths, similar to Next. Astro supports a function called `getStaticPaths` to generate dynamic paths, similar to Next.
@@ -613,3 +625,4 @@ const pokemon = {
``` ```
You have now fully migrated a Pokédex application from Next to Astro. You have now fully migrated a Pokédex application from Next to Astro.