- Next.js Tutorial
- Next.js - Home
- Next.js - Overview
- Next.js - Environment Setup
- Next.js Features
- Next.js - Pages
- Next.js - Static File Serving
- Next.js - Meta Data
- Next.js - CSS Support
- Next.js - Global CSS Support
- Next.js - Pre-Rendering
- Next.js Routing
- Next.js - Routing
- Next.js - Dynanic API Routes
- Next.js - Imperitive Routing
- Next.js - Shallow Routing
- Next.js API Routes
- Next.js - API Routes
- Next.js - API MiddleWares
- Next.js - Response Helpers
- Next.js Miscellaneous
- Next.js - Typescript
- Next.js - Environment Variables
- Next.js - Deployment
- Next.js - CLI
- Next.js Useful Resources
- Next.js - Quick Guide
- Next.js - Useful Resources
- Next.js - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Next.js - CSS Support
In Next.js, we can use inbuild css-in-js library 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 solid red;
}
Create container.js file in Components directory
import styles from './container.module.css'
function Container({ children }) {
return <div className={styles.container}>{children}</div>
}
export default Container
Now use Container component 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>
</>
)
}
Start Next.js Server
Run the following command to start the server −.
npm run dev > nextjs@1.0.0 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
Verify Output
Open localhost:3000 in a browser and go to first post, you will see the following output.
Advertisements