DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Your NextJS + Styled-Components + Darkmode quick-starter
Chris Hansen
Chris Hansen

Posted on

Your NextJS + Styled-Components + Darkmode quick-starter

Hey devs πŸ‘‹

This past weekend, I decided to make a little quick-starter for all my NextJS and Styled-components based projects.

It was a little annoying to bring up the docs for each tool to implement because I can never remember all the setup and configurations πŸ˜…

So, if you're a react dev tinkering with NextJS, you can use my starter to bootstrap your next app!

It has the bare minimum including a:
functioning Navbar, Mobile Nav, example component, react-icons library, and darkmode! That's it.
Please customize to your needing! If you understand React, basic CSS and :root variables, you'll find yourself editing and navigating through the files very easily. It also features the easiest Darkmode you've ever experienced!


Resources

  1. DEMO
  2. REPO
  3. NextJS
  4. Styled-components
  5. Next-theme

Getting started

As always, after cloning the repo, to get started simply run npm install , and in the case of a NextJS app, you're going to run npm run dev to start the development process.

That's it πŸ’―

If your familiar with create-react-app, the pages folder is like your src folder. Inside you'll find the index.js file, which is like your App.js file in a create-react-app project. You'll also find _app.js which is like your index.js file in create-react-app.


Conclusion

That wraps up Your NextJS + Styled-Components + Darkmode quick-starter! I hope you can make use of this quick-starter. NextJS is seriously cool, styled-components makes CSS even more fun, and darkmode doesn't have to be such a drag with next-theme! Have fun!


Have questions

Running into problems or have any questions!? Hit me up on Twitter!


You may also like

Top comments (1)

Collapse
 
swalker326 profile image
Shane Walker

The link to the repo is returning a 404. I'm stuck on this problem, I have a working dark mode however when I switch between light and dark mode I get an error in the console that my component class names are different from client to server. Any chance you were facing this problem also?

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-