DEV Community

Cover image for Next.js 13 with Tailwind and MUI Boilerplate
Serhii Kucherenko
Serhii Kucherenko

Posted on

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.

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.

1


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

Top comments (2)

Collapse
 
t04435 profile image
T04435 • Edited

Is there a way to NOT require the use of "use client" in every page a MUI component is used?

Collapse
 
serhii_kucherenko profile image
Serhii Kucherenko

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?