Next.js - CSS Support-alljchome-开发者的教程家园

Next.js Tutorial

Selected Reading

Next.js - CSS Support

In Next.js, we can use inbuild css-in-js pbrary named styled-jsx. It allows to write css within a react component and these styles will be scoped to component.

In this example, we ll create a Container object which will be used to style other components by containing them.

Let s update the nextjs project used in Meta Data chapter.

First create a Components directory at root level and add a file container.module.css as follows −

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

Create container.js file in Components directory


import styles from  ./container.module.css 

function Container({ children }) {
   return <span className={styles.container}>{children}</span>
}

export default Container

Now use Container component in first.js.


import Link from  next/pnk 
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>
      </>	  
   )
}

Start Next.js Server

Run the following command to start the server −.


npm run dev
> nextjs@1.0.0 dev Node
extjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compipng...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compipng...
event - compiled successfully

Verify Output

Open localhost:3000 in a browser and go to first post, you will see the following output.

Next.js - CSS Support

Start Next.js Server

Verify Output

友情链接