Next.js has become a powerful framework for building fast and scalable web applications. When it comes to styling your Next.js applications, you have various options at your disposal.
This blog will delve into the intricacies of Next.js styling, covering everything from CSS Modules to Tailwind, and ensuring you get the best out of your Next.js projects.
Before diving into styling, you need to initialize your project.
1npx create-next-app@latest
This command will create a new Next.js project structure, setting up the basic configuration and file structure.
Next.js works seamlessly with many CSS frameworks and tools. To install the necessary packages, run the following npm commands:
1npm install --save-dev tailwindcss postcss autoprefixer 2npx tailwindcss init -p
This install process sets up Tailwind CSS, which is a utility-first CSS framework.
For global styles, Next.js supports the use of a global CSS file. You can include a global css file by importing it into your _app.js or _app.tsx file.
1// pages/_app.js 2import '../styles/globals.css' 3 4function MyApp({ Component, pageProps }) { 5 return <Component {...pageProps} /> 6} 7 8export default MyApp
This setup ensures your global CSS file is applied across all pages.
For component-specific styling, CSS Modules offer a great way to encapsulate styles. CSS Modules allow you to scope CSS locally to the component, preventing naming conflicts.
Create a CSS module file and import it into your component:
1/* styles/Home.module.css */ 2.container { 3 padding: 0 2rem; 4}
1// pages/index.js 2import styles from '../styles/Home.module.css' 3 4export default function Home() { 5 return ( 6 <div className={styles.container}> 7 <h1>Welcome to Next.js!</h1> 8 </div> 9 ) 10}
Using CSS Modules, the styles are scoped to the component, avoiding any conflicts.
Integrating Tailwind CSS with Next.js is straightforward and enhances the styling process. Tailwind provides utility classes to style your components efficiently.
Ensure your tailwind config file is set up correctly:
1// tailwind.config.js 2module.exports = { 3 content: [ 4 './pages/**/*.{js,ts,jsx,tsx}', 5 './components/**/*.{js,ts,jsx,tsx}', 6 ], 7 theme: { 8 extend: {}, 9 }, 10 plugins: [], 11}
This configuration ensures Tailwind scans all your js, ts, jsx, tsx files for class names.
You can now add Tailwind classes directly in your JSX:
1// pages/index.js 2export default function Home() { 3 return ( 4 <div className="min-h-screen bg-gray-100 flex items-center justify-center"> 5 <h1 className="text-4xl font-bold">Hello, Next.js with Tailwind!</h1> 6 </div> 7 ) 8}
The utility-first approach of Tailwind makes it easy to create responsive designs without writing custom CSS.
Next.js supports various CSS-in-JS solutions, including styled-components and emotion. These libraries allow you to write CSS directly in your JavaScript or TypeScript files.
First, install styled-components:
1npm install styled-components 2npm install --save-dev babel-plugin-styled-components
Next, configure Babel to use the styled-components plugin:
1// .babelrc 2{ 3 "presets": ["next/babel"], 4 "plugins": [["styled-components", { "ssr": true }]] 5}
You can now use styled-components in your Next.js components:
1import styled from 'styled-components'; 2 3const Container = styled.div` 4 padding: 2rem; 5 background-color: #f0f0f0; 6`; 7 8export default function Home() { 9 return ( 10 <Container> 11 <h1>Styled Components in Next.js</h1> 12 </Container> 13 ) 14}
This approach allows you to create and manage component-level styles effectively.
Emotion is another popular CSS-in-JS library that works well with Next.js. To get started, install the necessary packages:
1npm install @emotion/react @emotion/styled
You can now use Emotion to style your components:
1/** @jsxImportSource @emotion/react */ 2import { css } from '@emotion/react'; 3import styled from '@emotion/styled'; 4 5const containerStyle = css` 6 padding: 2rem; 7 background-color: #f0f0f0; 8`; 9 10const Heading = styled.h1` 11 color: #333; 12`; 13 14export default function Home() { 15 return ( 16 <div css={containerStyle}> 17 <Heading>Emotion in Next.js</Heading> 18 </div> 19 ) 20}
Adding custom fonts in Next.js can enhance the look and feel of your application. You can include web fonts by updating your global CSS or using the next/font package.
To include custom fonts, update your global CSS:
1/* styles/globals.css */ 2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 3 4body { 5 font-family: 'Roboto', sans-serif; 6}
Alternatively, you can use the next/font package for a more efficient way to load fonts:
1npm install @next/font
Then use it in your _app.js:
1import { Roboto } from '@next/font/google'; 2 3const roboto = Roboto({ 4 weight: ['400', '700'], 5 subsets: ['latin'], 6}); 7 8function MyApp({ Component, pageProps }) { 9 return ( 10 <main className={roboto.className}> 11 <Component {...pageProps} /> 12 </main> 13 ); 14} 15 16export default MyApp;
This method ensures your fonts are optimized and loaded efficiently.
To ensure a consistent coding style, use prettier Next.js along with ESLint. Prettier automatically formats your code, making it easier to maintain a clean codebase.
Next.js also supports Sass and Less for those who prefer these preprocessors. Additionally, you can manage fonts, global state, and themes efficiently within your Next.js applications.
To use Sass, install the necessary package:
1npm install sass
You can now use .scss or .sass files in your project:
1// styles/Home.module.scss 2.container { 3 padding: 2rem; 4 background-color: #f0f0f0; 5}
1import styles from '../styles/Home.module.scss' 2 3export default function Home() { 4 return ( 5 <div className={styles.container}> 6 <h1>Sass in Next.js</h1> 7 </div> 8 ) 9}
Styling your Next.js application can be achieved through various methods, each offering unique advantages. Whether you choose CSS Modules, Tailwind, styled-components, emotion, or Sass, Next.js provides the flexibility to implement the best solution for your needs.
Understanding these styling techniques enhances your ability to build robust, scalable, and maintainable applications. With the knowledge gained, you can now confidently create beautiful and functional Next.js projects.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.