DEV Community

Cover image for Setting up NextJS and Styled Components💅
Zachery Morgan
Zachery Morgan

Posted on • Edited on

Setting up NextJS and Styled Components💅

#styledcomponents #nextjs #babel

Creating the app 

npx create-next-app@latest example-blog && 
cd example-blog
Enter fullscreen mode Exit fullscreen mode

This will...

  1. Create a NextJS app in a folder named example-blog
  2. Put you inside of the folder you just created

Installing Styled Components 

npm i --save styled-components &&
npm i --save-dev babel-plugin-styled-components
Enter fullscreen mode Exit fullscreen mode

This will...

  1. Install styled-components into our example-blog folder
  2. Install a babel plugin that allows us to see class names in the browser (with additional work to come)

Now open up whichever editor you use, I will be using Visual Studio Code, and open the pages/index.js file.
an easy way to do this is to go back to your console and type code . to open up the folder in VSC

To explain what the babel plugin does, I'm going to create a styled component for this page.
Under the imports that already exist, add this code.

import styled from 'styled-components';

const Container = styled.div`
  background-color: black;
  color: white;
`
Enter fullscreen mode Exit fullscreen mode

What this does is...

  1. Import the ability to create styled components
  2. Create a variable named Container that we declare is a styled div
  3. Assign plain CSS to our Container variable

Next I am going to replace an element with our new Container div. Click the arrow next to the outermost div to collapse it.

Basic styled component

Then I am going to replace those 2 lines with this...

Updated styled-component

Now if you go to your console and type

npm run dev
Enter fullscreen mode Exit fullscreen mode

You will see the basic NextJS homepage, but now with a black background and white text that we assigned in our styled component.

Basic homepage class name

But we have a problem, our div we created now just has random numbers and letters for a class name. There's no way of figuring out where an element is getting its styling from. This is where that babel plugin comes into play.

In your root folder, create a file name .babelrc
And inside of that file add this code.

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}
Enter fullscreen mode Exit fullscreen mode

Now hit ctrl-c in your console to stop your server, and type npm run dev again.

This time in your console you should see that your div now has a class name that tells you which folder the styled component lives in (pages) and what the name of that component is (Container)

Updated Babel class names

Spring Cleaning

To clean up our project a little we are going to remove the files we won't be using with this guide.

pages/api folder can be deleted
styles/Home.modules.css file can be deleted
I am also going to go ahead and import 'Poppins' font and place it inside of my globals.css file for the body to apply it to everything.

  • This will break your app because index.js is using these styles.
  • To fix this you can just remove everything from the return and add <h1>Hello</h1> or anything you want (we will be adding content to this file soon)

Top comments (0)