Next.js

Mis à jour le dimanche 19 décembre 2021 par johackim

Next.js est un framework JavaScript basé sur React pour créer des applications Web.

Installation

Pour créer une application Next.js, exécutez la commande suivante :

yarn add -D next react react-dom

Créez les 2 fichiers suivants :

// pages/index.js
export default () => <p>Hello world</p>;
// pages/_app.js
export default ({ Component, pageProps }) => <Component {...pageProps} />;

Puis ajoutez les commandes suivantes pour utiliser Next.js plus facilement :

npm pkg set scripts.dev="next dev"
npm pkg set scripts.build="next build"
npm pkg set scripts.start="next start"
npm pkg set scripts.lint="next lint"

PS : Exécutez la commande npm init -f si votre fichier package.json n'existe pas.

Utilisation

Une fois installé, vous pouvez démarrer Next.js avec la commande suivante :

npm run dev

Fonctions spéciales Next.js

Il existe certaines fonctions propre à next.js :

  • getStaticProps : fonction utilisé pour récupérer du contenu static durant la phase de build
  • getServerSideProps : fonction utilisé pour récupérer du contenu depuis un serveur
  • getInitialProps : fonction utilisé pour récupérer du contenu depuis un serveur ou un client

Références :