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.