next-starter

This is a pretty opinionated, some-batteries-included Next.js project bootstrapped with create-next-app.

Features

• Typescript, of course
• EditorConfig for cross-editor coding style consistency
• Prettier for code formatting
• ESLint for code quality
• Tailwind CSS as CSS framework
• tailwind-merge for merging class lists and optimizing Tailwind styling
• React Query/TanStack Query for Client-side server state/asynchronous state management
• zod for schema validation/parsing
• date-fns for date manipulation
• T3 Env for environment variables
• Lucide for icons

Getting Started

Prerequisites

You'll need pnpm to install packages and run the project. Follow the installation instructions and check your installation in a terminal with:

pnpm --version

Install dependencies

pnpm install

Run the development server

pnpm dev

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

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

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

VS Code Extensions and Settings

This template includes extensions and settings recommendations to enhance the development experience with VS Code.

You can browse and enable recommended extensions for VS Code with the Extensions: Show Recommended Extensions command.

Run pnpm settings to use recommended optimal settings like format/lint on save and other niceties.

Configuration

The linter/formatter configuration is pretty great out of the box, but if needed it can be tailored to your needs with these configuration files:

• .editorconfig - Customize core editor options like charset, EOL, indent type/size, etc. View EditorConfig Properties for more info;
• .prettier.config.cjs - Customize advanced formatting rules. View Prettier Docs for more info.
• .eslintrc.cjs - Customize static analysis rules. View ESLint Rules for more info.

Learn More about Next.js

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.

Build options

Skip lint/type-checking

It is possible to run build with SKIP_LINTING and/or SKIP_TYPE_CHECKING to bypass linting and type checks. It can be useful to save compilation time when the code has already been checked by a previous step.

Skip environment validation

Run build or dev with SKIP_ENV_VALIDATION to skip env validation. This is especially useful for Docker builds.

Acknowledgements

• cn helper from shadcn/ui
• env helper, cjs/mjs configuration files from T3 Stack