Next.js - Supporto CSS

In Next.js, possiamo usare la libreria css-in-js incorporata denominata styled-jsx. Permette di scrivere CSS all'interno di un componente React e questi stili saranno limitati al componente.

In questo esempio, creeremo un oggetto Contenitore che verrà utilizzato per definire altri componenti contenendoli.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Meta Data .

Per prima cosa crea una directory dei componenti a livello di root e aggiungi un file container.module.css come segue:

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Crea il file container.js nella directory dei componenti

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Ora usa il componente Contenitore in 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>
      </>	  
   )
}

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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 successfully

Verifica output

Apri localhost: 3000 in un browser e vai al primo post, vedrai il seguente output.