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 🙈.
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!
server-only has been included. Extra! Extra! Read all about it.. client-only is also available.
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 ./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.
import { ExampleAsyncComponent } from './ExampleAsyncComponent';
export default function Page() {
return (
<>
{/* @ts-expect-error Async Server Component */}
<ExampleAsyncComponent />
</>
);
}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.
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).
It includes Notistack for snackbars.
Cypress for Integration/E2E Testing.
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.
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!
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.