Migration depuis Next.js

Voici quelques concepts clés et stratégies de migration pour vous aider à démarrer. Utilisez le reste de nos documents et notre communauté sur Discord pour continuer !

Principales similitudes entre Next.js et Astro

Next.js et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

La syntaxe des fichiers .astro est similaire à celle de JSX. Développer avec Astro devrait vous sembler familier.
Les projets Astro peuvent également être de type SSG ou SSR avec prérendu au niveau de la page.
Astro utilise le routage basé sur des fichiers et permet à des pages spécialement nommées de créer des itinéraires dynamiques.
Astro est basé sur les composants, et votre structure de balisage sera similaire avant et après votre migration.
Astro possède des intégrations officielles pour React, Preact et Solid. Vous pouvez donc utiliser vos composants JSX existants. Notez que dans Astro, ces fichiers doivent avoir une extension .jsx ou .tsx.
Astro prend en charge l’installation de paquets NPM, y compris les bibliothèques React. Beaucoup de vos dépendances existantes fonctionneront dans Astro.

Principales différences entre Next.js et Astro

Lorsque vous reconstruisez votre site Next.js dans Astro, vous remarquerez quelques différences importantes :

Next.js est une application React monopage et utilise index.js comme racine de votre projet. Astro est un site multipage et index.astro est votre page d’accueil.
Les composants .astro ne sont pas écrits sous forme de fonctions exportées renvoyant des modèles de page. Au lieu de cela, vous diviserez votre code en une « barrière de code » pour votre JavaScript et en un corps dédié au HTML que vous générez.
Axé sur le contenu : Astro a été conçu pour présenter votre contenu et pour vous permettre d’opter pour l’interactivité uniquement si nécessaire. Une application Next.js existante peut être conçue pour une interactivité élevée côté client et peut nécessiter des techniques Astro avancées pour inclure des éléments plus difficiles à répliquer à l’aide de composants .astro, tels que des tableaux de bord.

Convertissez votre projet Next.js

Chaque migration de projet sera différente, mais vous effectuerez certaines actions courantes lors de la conversion de Next.js vers Astro.

Créer un nouveau projet Astro

Utilisez la commande create astro de votre gestionnaire de paquets pour lancer l’assistant CLI d’Astro ou choisissez un thème de communauté dans la vitrine de thèmes Astro.

Vous pouvez utiliser un argument --template avec la commande create astro pour démarrer un nouveau projet Astro avec l’un de nos démarreurs officiels (par exemple docs, blog, portfolio). Vous pouvez également démarrer un nouveau projet à partir de n’importe quel dépôt Astro existant sur GitHub.

# exécuter l'assistant CLI d'Astro
npm create astro@latest

# créer un nouveau projet en utilisant un exemple officiel
npm create astro@latest -- --template <example-name>

# exécuter l'assistant CLI d'Astro
pnpm create astro@latest

# créer un nouveau projet en utilisant un exemple officiel
pnpm create astro@latest --template <example-name>

# exécuter l'assistant CLI d'Astro
yarn create astro@latest

# créer un nouveau projet en utilisant un exemple officiel
yarn create astro@latest --template <example-name>

Ensuite, copiez les fichiers existants de votre projet Next vers votre nouveau projet Astro dans un dossier séparé en dehors de src.

Installer des intégrations (facultatif)

Vous trouverez peut-être utile d’installer certaines des intégrations facultatives d’Astro à utiliser lors de la conversion de votre projet Next en Astro :

@astrojs/react: pour réutiliser certains de vos composants React orientés UI dans votre nouveau site Astro ou pour continuer à coder des composants React.
@astrojs/mdx: pour importer des fichiers MDX existants de votre projet Next ou pour utiliser MDX dans votre nouveau site Astro.

Placer votre code source dans `src`

En suivant la structure du projet d’Astro:

Gardez le dossier public/ de Next intact.

Astro utilise le répertoire public/ pour les ressources statiques, tout comme Next. Aucune modification n’est nécessaire pour ce dossier, ni pour son contenu.
Copiez ou déplacez les autres fichiers et dossiers de Next (par exemple, pages, styles, etc.) dans le dossier src/ d’Astro pendant que vous reconstruisez votre site en suivant la structure du projet Astro.

Comme Next, le dossier src/pages/ d’Astro est un dossier spécial utilisé pour le routage basé sur des fichiers. Tous les autres dossiers sont facultatifs et vous pouvez organiser le contenu de votre dossier src/ comme vous le souhaitez. D’autres dossiers courants dans les projets Astro incluent src/layouts/, src/components, src/styles, src/scripts.

Le fichier de configuration d’Astro

Astro possède un fichier de configuration à la racine de votre projet appelé astro.config.mjs. Ceci est utilisé uniquement pour configurer votre projet Astro et toutes les intégrations installées, y compris les adaptateurs SSR.

Astuces : Convertir les fichiers JSX en fichiers `.astro`

Voici quelques conseils pour convertir un composant Next .js en un composant .astro :

Utilisez le JSX renvoyé par la fonction du composant Next.js existant comme base pour votre modèle HTML.
Remplacez toute syntaxe Next ou JSX par une syntaxe Astro ou par des normes web HTML. Ceci comprend <Link>, <Script>, {children} et className par exemple.
Déplacez tout le JavaScript nécessaire, y compris les instructions d’importation, dans une « barrière de code » (---). Remarque : le JavaScript utilisé pour afficher le contenu de manière conditionnelle est souvent écrit directement dans le modèle HTML dans Astro.
Utilisez Astro.props pour accéder à toutes les props supplémentaires précédemment transmises à votre fonction Next.
Décidez si les composants importés doivent également être convertis en syntaxe Astro. Avec l’intégration officielle installée, vous pouvez utiliser les composants React existants dans votre fichier Astro. Mais vous souhaiterez peut-être les convertir en composants .astro, surtout s’ils n’ont pas besoin d’être interactifs !
Remplacez getStaticProps() avec des déclarations d’importation ou avec import.meta.glob() pour interroger vos fichiers locaux. Utilisez fetch() pour récupérer des données externes.

Voir un exemple d’un fichier.js converti étape par étape depuis Next.

Comparaison : JSX vs Astro

Comparez le composant Next suivant et un composant Astro correspondant :

JSX
Astro

import Header from "./header";
import Footer from "./footer";
import "./layout.css";

export async function getStaticProps() {
    const res = await fetch("https://api.github.com/repos/withastro/astro");
    const json = await res.json();
    return {
        props: { message: json.message, stars: json.stargazers_count || 0 },
    }
}

const Component = ({ stars, message }) => {

    return (
        <>
            <Header />
            <p style={{
                backgroundColor: `#f4f4f4`,
                padding: `1em 1.5em`,
                textAlign: `center`,
                marginBottom: `1em`
            }}>Astro has {stars} 🧑‍🚀</p>
            <Footer />
        </>
    )
}

export default Component;

---
import Header from "./header";
import Footer from "./footer";
import "./layout.css";

const res = await fetch("https://api.github.com/repos/withastro/astro");
const json = await res.json();
const message = json.message;
const stars = json.stargazers_count || 0;
---
<Header />
<p class="banner">Astro has {stars} 🧑‍🚀</p>
<Footer />

<style>
  .banner {
    background-color: #f4f4f4;
    padding: 1em 1.5em;
    text-align: center;
    margin-bottom: 1em;
  }
<style>

Migration des fichiers de mise en page

Vous trouverez peut-être utile de commencer par convertir vos mises en page et modèles Next.js en composants Astro de mise en page.

Next propose deux méthodes différentes pour créer des fichiers de mise en page, chacune gérant les mises en page différemment d’Astro :

Le dossier pages
Le dossier /app

Chaque page Astro nécessite explicitement la présence des balises <html>, <head> et <body>, il est donc courant de réutiliser un fichier de mise en page sur plusieurs pages. Astro utilise un <slot /> pour le contenu des pages sans aucune déclaration d’importation requise. Notez le modèle HTML standard et l’accès direct à <head> :

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <!-- Enveloppez l'élément slot avec votre modèle de mise en page existant -->
    <slot />
  </body>
</html>

Migration depuis le répertoire `pages` de Next.js

Votre projet Next peut avoir un fichier pages/_document.jsx qui importe des composants React pour personnaliser le <head> de votre application :

import Document, { Html, Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

); }}">

Créez un nouveau fichier de mise en page Astro en utilisant uniquement le JSX renvoyé.
Remplacez tous les composants React par <html>, <head>, <slot> et d’autres balises HTML standard.
src/layouts/Document.astro
```
<html lang="en">
  <head>
      <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <slot/>
  </body>
</html>
```
">

Migration depuis le répertoire `/app` de Next.js

Les fichiers de mise en page du répertoire app/ de Next.js sont créés avec deux fichiers : un fichier layout.jsx pour personnaliser les contenus de <html> et de <body>, et un fichier head.jsx pour personnaliser le contenu de l’élément <head>.

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

);}">

--- import { getCollection } from 'astro:content'; // Get all `src/content/blog/` entries const allBlogPosts = await getCollection('blog'); // Get all `src/pages/posts/` entries const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const response = await fetch('https://randomuser.me/api/'); const data = await response.json(); const randomUser = data.results[0]; ---

import Link from 'next/link' import styles from '../styles/poke-list.module.css'; export default function Home({ pokemons }) { return ( <> <ul className={`plain-list ${styles.pokeList}`}> {pokemons.map((pokemon) => ( <li className={styles.pokemonListItem} key={pokemon.name}> <Link className={styles.pokemonContainer} as={`/pokemon/${pokemon.name}`} href="/pokemon/[name]"> <p className={styles.pokemonId}>No. {pokemon.id}</p> <img className={styles.pokemonImage} src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}></img> <h2 className={styles.pokemonName}>{pokemon.name}</h2> </Link> </li> ))} </ul> </> ) } export const getStaticProps = async () => { const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151") const resJson = await res.json(); const pokemons = resJson.results.map(pokemon => { const name = pokemon.name; // https://pokeapi.co/api/v2/pokemon/1/ const url = pokemon.url; const id = url.split("/")[url.split("/").length - 2]; return { name, url, id } }); return { props: { pokemons, }, } }

--- --- <ul class="plain-list pokeList"> {pokemons.map((pokemon) => ( <li class="pokemonListItem"> <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}> <p class="pokemonId">No. {pokemon.id}</p> <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/> <h2 class="pokemonName">{pokemon.name}</h2> </a> </li> ))} </ul>

--- import Layout from '../layouts/layout.astro'; const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151"); const resJson = await res.json(); const pokemons = resJson.results.map(pokemon => { const name = pokemon.name; // https://pokeapi.co/api/v2/pokemon/1/ const url = pokemon.url; const id = url.split("/")[url.split("/").length - 2]; return { name, url, id } }); --- <Layout> <ul class="plain-list pokeList"> {pokemons.map((pokemon) => ( <li class="pokemonListItem" key={pokemon.name}> <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}> <p class="pokemonId">No. {pokemon.id}</p> <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/> <h2 class="pokemonName">{pokemon.name}</h2> </a> </li> ))} </ul> </Layout>

Plus de guides sur les migrations

Migration depuis Next.js

Principales similitudes entre Next.js et Astro

Principales différences entre Next.js et Astro

Convertissez votre projet Next.js

Créer un nouveau projet Astro

Installer des intégrations (facultatif)

Placer votre code source dans src

Le fichier de configuration d’Astro

Astuces : Convertir les fichiers JSX en fichiers .astro

Comparaison : JSX vs Astro

Migration des fichiers de mise en page

Migration depuis le répertoire pages de Next.js

Migration depuis le répertoire /app de Next.js

Migration de pages et des articles

Pages React

Pages Markdown et MDX

Migration des tests

Référence : Convertir la syntaxe Next.js en syntaxe Astro

Les liens : de Next vers Astro

Les Imports : de Next vers Astro

La propriété Children : de Next vers Astro

La récupération des données : de Next vers Astro

Les styles : de Next vers Astro

Le composant Next Image vers celui d’Astro

Exemple guidé : Récupération des données, de Next vers Astro

Ressources communautaires

Plus de guides sur les migrations

Placer votre code source dans `src`

Astuces : Convertir les fichiers JSX en fichiers `.astro`

Migration depuis le répertoire `pages` de Next.js

Migration depuis le répertoire `/app` de Next.js