Next.js 16 Project Setup with TypeScript and Tailwind

This skill guides you through creating a complete Next.js 16 project configured for project management platforms.

What This Skill Does

Scaffolds a modern Next.js 16 application with React 19, TypeScript, and Tailwind CSS, including proper configuration for project management use cases and comprehensive documentation.

Instructions

Follow these steps to set up the Next.js 16 project:

Step 1: Scaffold the Next.js 16 Project

Create a new Next.js 16 project with the following configuration:

Use the command:

```bash

npx create-next-app@latest project-name --typescript --tailwind --app

```

Configure the project with sensible defaults:

Step 2: Customize for Project Management Platform

Configure the project for project management use cases:

1. **Directory Structure**: Organize the codebase with:

- `src/app/` for app routes

- `src/components/` for reusable components

- `src/lib/` for utilities and helpers

- `src/types/` for TypeScript definitions

- `src/styles/` for global styles

2. **Configuration Files**: Set up:

- `next.config.ts` with optimizations

- `tailwind.config.ts` with custom design tokens

- `.env.local` template for environment variables

- `.gitignore` to exclude sensitive files

3. **Base Components**: Create foundational components for project management:

- Layout components

- Navigation structure

- Common UI elements (buttons, cards, forms)

Step 3: Compile and Verify

Install dependencies and verify the project compiles successfully:

1. Install all dependencies:

```bash

npm install

```

2. Run the development server:

```bash

npm run dev

```

3. Verify compilation with no errors

4. Test that the application runs at `http://localhost:3000`

5. Run TypeScript type checking:

```bash

npm run type-check

```

6. Run linting:

```bash

npm run lint

```

Step 4: Create Comprehensive Documentation

Generate a complete `README.md` that includes:

1. **Project Overview**: Brief description of the project and its purpose

2. **Tech Stack**: List all technologies used (Next.js 16, React 19, TypeScript, Tailwind CSS)

3. **Getting Started**:

- Prerequisites (Node.js version, package manager)

- Installation steps

- Running the development server

- Building for production

4. **Project Structure**: Overview of directory organization

5. **Environment Variables**: Template and explanation of required variables

6. **Scripts**: Available npm scripts and their purposes

7. **Development Guidelines**: Code style, naming conventions, best practices

8. **Deployment**: Instructions for deploying to common platforms (Vercel, Railway, etc.)

9. **Contributing**: Guidelines if applicable

10. **License**: License information

Example Usage

When a user requests "Set up a new Next.js project for task management":

1. Create the Next.js 16 app with TypeScript and Tailwind

2. Customize directory structure for task management features

3. Install dependencies and verify build

4. Generate comprehensive README.md with task management context

Important Notes