Next.js - Support CSS
Dans Next.js, nous pouvons utiliser la bibliothèque inbuild css-in-js nommée styled-jsx. Il permet d'écrire du CSS dans un composant react et ces styles seront étendus au composant.
Dans cet exemple, nous allons créer un objet Container qui sera utilisé pour styliser d'autres composants en les contenant.
Mettons à jour le projet nextjs utilisé dans le chapitre Meta Data .
Créez d'abord un répertoire Components au niveau racine et ajoutez un fichier container.module.css comme suit -
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}Créer un fichier container.js dans le répertoire Components
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default ContainerUtilisez maintenant le composant Container dans first.js.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost() {
return (
<>
<Container>
<Head>
<title>My First Post</title>
</Head>
<h1>My First Post</h1>
<h2>
<Link href="/">
<a>Home</a>
</Link>
</h2>
</Container>
</>
)
}Démarrez le serveur Next.js
Exécutez la commande suivante pour démarrer le serveur -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfullyVérifier la sortie
Ouvrez localhost: 3000 dans un navigateur et accédez au premier message, vous verrez la sortie suivante.
