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 Ko…

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


Print Share Comment Cite Upload Translate
APA
Serhii Kucherenko | Sciencx (2024-03-28T13:08:47+00:00) » Next.js 13 with Tailwind and MUI Boilerplate. Retrieved from https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/.
MLA
" » Next.js 13 with Tailwind and MUI Boilerplate." Serhii Kucherenko | Sciencx - Saturday December 10, 2022, https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/
HARVARD
Serhii Kucherenko | Sciencx Saturday December 10, 2022 » Next.js 13 with Tailwind and MUI Boilerplate., viewed 2024-03-28T13:08:47+00:00,<https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/>
VANCOUVER
Serhii Kucherenko | Sciencx - » Next.js 13 with Tailwind and MUI Boilerplate. [Internet]. [Accessed 2024-03-28T13:08:47+00:00]. Available from: https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/
CHICAGO
" » Next.js 13 with Tailwind and MUI Boilerplate." Serhii Kucherenko | Sciencx - Accessed 2024-03-28T13:08:47+00:00. https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/
IEEE
" » Next.js 13 with Tailwind and MUI Boilerplate." Serhii Kucherenko | Sciencx [Online]. Available: https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/. [Accessed: 2024-03-28T13:08:47+00:00]
rf:citation
» Next.js 13 with Tailwind and MUI Boilerplate | Serhii Kucherenko | Sciencx | https://www.scien.cx/2022/12/10/next-js-13-with-tailwind-and-mui-boilerplate/ | 2024-03-28T13:08:47+00:00
https://github.com/addpipe/simple-recorderjs-demo