Next13 (App Router) + TS + Tailwind

🚀 A boilerplate and Starter for Next.js with App Router simple, scalable, and powerful architecture for building production ready React applications.

Requirements

• Node.js 16+ and npm

Getting started

Run the following command on your local environment:

npm install

Then, you can run locally in development mode with live reload:

npm run dev

Open http://localhost:3000 with your favorite browser to see your project.

Introduction

React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.

This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my vast experience working with different codebases, this architecture turns out to be the most effective.

Table Of Contents

• Best Practices
• Folder Structures

Why NextJs

Next.js is an open-source framework built on Node.js that allows you to create React applications that you can render on the server. It provides out-of-the-box tooling and configuration you need to build fast, SEO-friendly React apps.

Whether you want to create static pages, e-commerce applications, or fetch data from APIs, Next.js can help. It enables you to go from one line of code to a full-blown application with little configuration.

This is the main advantage of Next.js. Once you install it, you can start creating fast production-ready applications.

Features:

• ✅ Integrate with Tailwind CSS
• ✅ Form with React Hook From
• ✅ Validation library with Zod
• ✅ Code Formatter with Prettier
• ✅ Husky for Git Hooks
• ✅ Unit Testing with Jest and React Testing Library
• ✅ Absolute Imports using @ prefix
• ✅ Zustand as state managment

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting
• ✅ All the Next.js pages are statically generated by default. You can easily switch to SSR adding getServerSideProps to your page.
• ✅ Nothing is hidden from you, so you have the freedom to make the necessary adjustments to fit your needs and preferences.
• ✅ Minimal code
• ✅ SEO-friendly
• 🚀 Production-ready

Why Typescript

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects. Moreover, TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc

Why Tailwind

What Tailwind does is it offers more control over styling to the developers. This not only improves development speed but also improves productivity.

A major advantage of Tailwind CSS is that optimization can be performed using PurgeCSS. PurgeCSS can reduce the file size considerably by scanning the HTML and removing unused classes.

Disclaimer

This is not supposed to be a template, boilerplate or a framework. It is an opinionated guide that shows how to do some things in a certain way. You are not forced to do everything exactly as it is shown here, decide what works best for you and your team and stay consistent with your style.

Contributing

Contributions are always welcome! If you have any ideas, suggestions, fixes, feel free to contribute.