Next.js

⚠️ Warning: This tool is a work in progress, there are a couple of issues that will be addressed in the nearest future.

Next.js starter/boilerplate project with the following:

• Tailwind CSS.
• shadcn/ui components and Lucide icons.
• React Hook Form for forms.
• Zod for schema validation.
• Vitest and React Testing Library for unit and component tests.
• Playwright for end-to-end tests.
• Prettier and ESLint with tailored configs.
• Custom VSCode config.
• GitHub Actions for running linter, formatter and tests.
• Great match for your next billion-dollar startup 🚀

The project has a few example pages and route handlers with tests, including a simple AI chat bot example, made with OpenAI Node API Library and Vercel AI SDK. You can delete these if you don't need them.

Installation

1. Make sure you have Node.js 20 installed.

2. Install pnpm.

   corepack enable
   corepack prepare pnpm@latest --activate

3. Create a new project from this template.

   pnpm dlx degit IgorKrupenja/nextjs-starter my-billion-dollar-startup

4. Install dependencies.

   cd my-billion-dollar-startup
   pnpm install

5. If you want to use the chat bot example, create .env.local file and add your OpenAI API key to that file.

   touch .env.local
   echo "OPENAI_API_KEY=your-api-key" >> .env.local

Running

pnpm dev

Testing

The starter project aims to have near-100% test coverage. Note that components inside src/components/ui are created by the external shadcn-ui library and are thus not in scope for testing. You can run unit tests with:

pnpm test

And to check coverage:

pnpm test:coverage

The project also has Playwright set up for end-to-end tests, run with:

pnpm test:e2e

CI

The project has GitHub Actions set up to run linter, formatter and tests. It runs on pushes to the main branch and pull requests that are not in draft status.

Deployment

The easiest way would be to deploy to Vercel. No special configuration is needed except adding your OpenAI API key as a variable there.

Structure

Inside the src folder:

src
├── app # App layout and homepage with chat bot example
│   ├── api
│   │   ├── chat # Sample route handler for chat bot
│   │   └── feedback # Sample route handler for form
│   └── feedback # Sample page with form
├── components # Components grouped by pages
│   ├── chat
│   ├── common
│   ├── feedback
│   └── ui # Re-usable components from shadcn-ui
├── declarations # TypeScript declarations, add types for .env variables here
├── e2e # Playwright end-to-end tests
├── interfaces
├── lib # Misc utilities
├── schemas # Zod schemas used for form and API validation
├── styles # shadcn-ui base config
└── test # Vitest setup and utils

To do

• Coming soon: Finish the chat bot example UI.
• Coming soon: Add more tests.
• Add support for Supabase and Supabase Auth (or similar).
• Add support for Stripe. You next billion-dollar startup will need to make money, right? 😉