NextJS (App Router ✨) TailwindCSS Starter + MUI and MUI X Date Pickers

This is a Next.js project bootstrapped with create-next-app. It uses the now stable App Router feature.

It includes many starter files/folders that you may or may not need. Reference the docs and add/delete as you like. Consider Colocation.

You're encouraged to Split project files by feature or route.

You'll also want a .env.local where you will store your secrets 🙈.

`'use client'` :(

Unfortunately, we must use 'use client' in most of the components, limiting the benefits of SSR. However, we can still use SSR for the initial page load.

This limitation is due to the lack of interoperability between NextJS and MUI (specifically @emotion). See this issue. Once this is resolved, we can remove 'use client' from most of the components.

Read more about the use client directive. It's not ideal, but it's not the end of the world. For now, we are actually bypassing much of the advantage of the App Router feature...for now!

`import 'server-only';`

server-only has been included. Extra! Extra! Read all about it.. client-only is also available.

Code Quality

It includes ESLint, Prettier, and TypeScript support out of the box. It includes appropriate VS Code settings to ensure a consistent development experience.

ESLint enforces encapsulation of 🪝s. It's only a ⚠️ warning, but it's a good practice to follow. There is a ./app/hooks folder where you can put your hooks.

It includes a pre-commit 🪝 using husky and lint-staged (see package.json).

It includes Zod with React Hook Form support for form validation.

Async Server Component TypeScript Error

import { ExampleAsyncComponent } from './ExampleAsyncComponent';
export default function Page() {
  return (
    <>
      {/* @ts-expect-error Async Server Component */}
      <ExampleAsyncComponent />
    </>
  );
}

Dev Experience

It can always be debatable, but there is a .vscode with settings and recommended extensions. Generally, as you work, once you leave the file it will automatically save 💾, lint (auto-fixes as much as it can), and, prettify/format the code. The result is much less manual code formatting/correcting.

Data Fetching

if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR or React Query. Source

It includes SWR.

💹

It includes Recharts. Use this for...charts 💹 (e.g. Analytics).

Snackbars

It includes Notistack for snackbars.

Spin Delay

Testing ✅

Cypress for Integration/E2E Testing.

Getting Started

First, run the development server: npm run dev.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed at http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

manavm1990/next-app-router-tailwind-mui-starter