Difference between revisions of "VT2020-Website-Rendering-Types-Demo"

From air
Jump to navigation Jump to search
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
= Créer une application Next.js =
  
= Créer une application Next.js =
  +
  +
Ouvrez votre terminal et accédez au répertoire dans lequel vous souhaitez créer l'application.
  +
  +
<br>
  +
Pour '''créer une application Next.js''', exécutez la commande suivante :
  +
<pre>
  +
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
  +
</pre>
  +
Cette commande utilise l'outil appelé create-next-app, qui amorce une application Next.js pour vous.
  +
Vous avez maintenant un nouveau répertoire appelé nextjs-blog.
  +
  +
<br>
  +
Plaçons nous à l'interieur de ce répertoire :
  +
<pre>
  +
cd nextjs-blog
  +
</pre>
  +
  +
<br>
  +
Ensuite, '''démarrez le serveur de développement''' de votre application Next.js
  +
<pre>
  +
npm run dev
  +
</pre>
  +
Cela lance votre application sur le '''port 3000'''. <br>
  +
Allez voir si ça a fonctionné sur votre navigateur : http://localhost:3000
  +
<br><br>
  +
Vous devriez avoir une page d'acceuil comme celle-ci :
  +
[[File:Welcome-to-nextjs.png|left|200px|thumb]]
  +
<br><br><br><br><br><br><br><br>
  +
  +
Maintenant essayons d'éditer cette page.
  +
<br><br>
  +
Assurez-vous que la commande 'npm run dev' est toujours en marche.
  +
<br>
  +
Ouvrez le fichier '''pages/index.js''' avec votre editeur de texte préféré.
  +
<br>
  +
Vous pouvez desormais éditer cette page ou même créer d'autres pages.
  +
<br>
  +
  +
= Source =
   
 
https://nextjs.org/learn/basics/create-nextjs-app
  
https://nextjs.org/learn/basics/create-nextjs-app

Latest revision as of 09:35, 19 January 2021

Créer une application Next.js

Ouvrez votre terminal et accédez au répertoire dans lequel vous souhaitez créer l'application.


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

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

Cette commande utilise l'outil appelé create-next-app, qui amorce une application Next.js pour vous. Vous avez maintenant un nouveau répertoire appelé nextjs-blog.


Plaçons nous à l'interieur de ce répertoire : 

cd nextjs-blog


Ensuite, démarrez le serveur de développement de votre application Next.js 

npm run dev

Cela lance votre application sur le port 3000.
Allez voir si ça a fonctionné sur votre navigateur : http://localhost:3000

Vous devriez avoir une page d'acceuil comme celle-ci :

Welcome-to-nextjs.png









Maintenant essayons d'éditer cette page.

Assurez-vous que la commande 'npm run dev' est toujours en marche.
Ouvrez le fichier pages/index.js avec votre editeur de texte préféré.
Vous pouvez desormais éditer cette page ou même créer d'autres pages.

Source

https://nextjs.org/learn/basics/create-nextjs-app

Retrieved from "https://air.imag.fr/index.php?title=VT2020-Website-Rendering-Types-Demo&oldid=50323"