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!
Top comments (1)
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?