Next.js - Dukungan CSS
Di Next.js, kita bisa menggunakan library css-in-js inbuild bernama styled-jsx. Ini memungkinkan untuk menulis css dalam komponen react dan gaya ini akan dicakup ke komponen.
Dalam contoh ini, kita akan membuat objek Container yang akan digunakan untuk mengatur gaya komponen lain dengan memuatnya.
Mari perbarui proyek nextjs yang digunakan di bab Meta Data .
Pertama buat direktori Komponen di tingkat root dan tambahkan file container.module.css sebagai berikut -
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}Buat file container.js di direktori Komponen
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default ContainerSekarang gunakan komponen Container di 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>
</>
)
}Mulai Server Next.js
Jalankan perintah berikut untuk memulai 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 successfullyVerifikasi Output
Buka localhost: 3000 di browser dan masuk ke postingan pertama, Anda akan melihat output berikut.
