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

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!