Les nouveautés de la version 10 de Next.js

C’est quoi Next.js?

Les nouveautés

npx create-next-app myapp
  • C’est dans le répertoire pages que va se trouver toutes les pages de l’application
  • Dans le répertoire public, vous pouvez mettre tous vos fichiers statiques (images, fonts)
  • Dans le répertoire styles se trouve tous vos fichiers style css. c’est un répertoire optionnel, vous pouvez mettre vos styles dans n’import quel répertoire sauf le répertoire pages qui contient les routes.

Le composant Image

import Image from next/imageexport default function Home(){return(    <div>     <Image src="/photo.jpg" width={400} height={400}/>    </div>   )}
yarn dev
<Image src="/photo.jpg" unsized/>
touch next.config.js
module.exports = {
images: {
deviceSizes: [320, 420, 768, 1024, 1200],
domains: ["res.cloudinary.com"],
},
};
<Image src="https://res.cloudinary.com/demo/image/upload/lady.jpg"  unsized/>

Le routage internationalisé

module.exports = {  images: {   deviceSizes: [320, 420, 768, 1024, 1200],   domains: ["res.cloudinary.com"], },i18n: {  locales: ['en', 'fr', 'nl'],  defaultLocale: 'en', },};
yarn dev
http://localhost:3000/fr

L’attribut as n’est plus nécessaire sur Link

<Link href="/blog/[slug]" as={`/blog/react`}>
<a>react</a>
</Link>
<Link href={`/blog/react`}>
<a>react</a>
</Link>

React 17

import React, {useState} from "react";export const Counter = () => {
const [count, setCount] = useState(1);
return(
<div>
<button onClick={()=> setCount(count + 1)}>Incrementer</button>
<p>{count}</p>
</div>
)}
import {useState} from "react";export const Counter = () => {
const [count, setCount] = useState(1);
return(
<div>
<button onClick={()=> setCount(count + 1)}>Incrementer</button>
<p>{count}</p>
</div>
)}

--

--

Web Developer | Udemy Instructor | Creator of Salvia-kit & Kimia-ui

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Enoch Ndika

Enoch Ndika

Web Developer | Udemy Instructor | Creator of Salvia-kit & Kimia-ui