Next.js 13 with Tailwind and MUI Boilerplate

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.

Twitter | LinkedIn