Generate and run a shell command to create a new Next.js application.
First, ask the user to provide an "Application Name". Then, use their input to replace every instance of [APP_NAME].
Project Specifications:
- Application Name: [APP_NAME]
- Framework: Next.js (latest version)
- Language: TypeScript & ESLint
- Styling: Tailwind CSS
- UI Components:
shadcn/ui
- Testing: Vitest with React Testing Library
- Project Structure: App Router, no
/src
directory,@/*
import alias - Development Server: Use Turbopack
- Version Control: Git
Script Instructions:
- Chain Commands: Use the && operator to link all commands together.
- Create Next.js App: Start with
npx create-next-app@latest [APP_NAME] --yes
and include all the necessary flags (--typescript
,--tailwind
,--eslint
,--app
,--no-src-dir
,--import-alias "@/*"
) to run it non-interactively. - Initialize
shadcn/ui
: After changing into the new [APP_NAME] directory withcd
, runnpx shadcn@latest init
with the-y
flag to accept all default settings, which match our project's configuration. This avoids all interactive prompts. - Install Vitest: Install
vitest
,@vitejs/plugin-react
,jsdom
, and@testing-library/react
as development dependencies. - Create Vitest Config: Use an
echo
command to create and write the contents ofvitest.config.ts
in a single step. The config must include the@/*
path alias. - Add Test Scripts: Use the
npm pkg set
command to add the"test": "vitest"
and"test:ui": "vitest --ui"
scripts directly to package.json. - Initialize Git: Initialize a Git repository and make the first commit.
- Final Output: The script should conclude by printing a confirmation message with the next steps for the user (how to
cd
into the [APP_NAME] directory and run the dev server). Do not attempt to run the server automatically.