In this crazy boilerplate, I've prepared the setup with the latest up-to-date stack for the Frontend. Let's see what's inside.
- Next.js 13 with its latest features like the app directory (you check how it works in this excellent article by Kapeel Kokane)
- Material UI (or MUI) to speed up the development with pre-made components and excellent theme support
- Tailwind CSS --- I hate writing CSS(SCSS) from scratch
For those, who, like me, like to be confident in their code and help others to follow the same set of rules, I've added must-have tools:
- ESLint, to ensure you and your teammates follow the same rules that prevent you from well-known bugs like "Invalid Hooks Call."
- Prettier because it's just heart-breaking when you have differently formatted code across the app
Optionally, among the scripts in the package.json file, you would find the "push-check" command I usually run before push or as a part of the CI process which checks types and linter errors. And you can take a step even further, and install the Husky package so it runs this command automatically on push, or on commit. But it's out of the scope of this article, as I add husky only if there's a R-E-A-L need for it.
Afterword
You can find the source code in my GitHub account, and for those who like to check things from the browser, I prepared a DEMO of the deployed app (dark mode by default).
Remember: You can choose whatever framework or library or package you want, but in the end, you would be responsible for the outcomes. So choose wisely, and don't make rush decisions by blindly cloning the repo if you're not confident in what you're working with.
I hope the article was helpful. Please subscribe so you don't miss the following articles, and feel free to contact me if you have any questions.
Top comments (2)
Is there a way to NOT require the use of "use client" in every page a MUI component is used?
You don't need to add 'use client' for each page, just when it's needed (as only some components would require 'window').
Can you provide a sample so I can help more?