Create Your First App

This tutorial walks you through creating a new Next.js application with RocketFuel. By the end, you’ll have a fully configured project with authentication and database setup.

Create a New Project

1. Run the init command

   Open your terminal and run:

   rocketfuel init my-app

   You can replace my-app with any name for your project.

2. Select features

   RocketFuel will prompt you to select optional features:

   🚀 Welcome to Rocketfuel!
      Let's create your Next.js application.
   
   📦 Select optional features:
   
   ? Add Clerk for authentication? (Y/n)
   ? Add Stripe checkout integration? (y/N)
   ? Add BullMQ for job queues and background workers? (y/N)
   ? Add Resend for email sending? (y/N)
   ? Add CLAUDE.md for AI coding assistants? (Y/n)

   For this tutorial, select:

   • Clerk: Yes (recommended for most apps)
   • Stripe: No (skip for now)
   • BullMQ: No (skip for now)
   • Resend: No (skip for now)
   • CLAUDE.md: Yes (helpful if using AI assistants)

3. Wait for project creation

   RocketFuel will:

   • Create a new Next.js project with TypeScript and Tailwind
   • Set up the folder structure
   • Install and configure shadcn/ui components
   • Configure Drizzle ORM
   • Add authentication pages and API routes (if selected)
   • Generate configuration files

   This typically completes in under a minute.

4. Review the output

   When complete, you’ll see:

   ✅ Your project is ready!
   
   📁 Next steps:
   
      cd my-app
   
      # Copy .env.example to .env and configure your variables
      cp .env.example .env
   
      # Set up your database and run migrations
      npx drizzle-kit push
   
      # Start the development server
      npm run dev

Understanding the Project Structure

Your new project has this structure:

my-app/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── webhooks/clerk/route.ts   # Clerk webhook handler
│   │   ├── sign-in/[[...sign-in]]/
│   │   │   └── page.tsx                  # Sign-in page
│   │   ├── sign-up/[[...sign-up]]/
│   │   │   └── page.tsx                  # Sign-up page
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── ui/                           # shadcn/ui components
│   ├── lib/
│   │   └── utils.ts
│   ├── middleware.ts                      # Clerk middleware
│   └── server/
│       └── db/
│           ├── index.ts                  # Database client
│           └── schema.ts                 # Drizzle schema
├── .env.example                          # Environment template
├── docker-compose.yml                    # Docker services
├── drizzle.config.ts                     # Drizzle configuration
├── package.json
└── CLAUDE.md                             # AI assistant docs

Tip

The sign-in/[[...sign-in]]/ and sign-up/[[...sign-up]]/ directories use Next.js catch-all routes. This allows Clerk to handle multi-step authentication flows within the same route.

Configure Environment Variables

1. Copy the environment template

   cd my-app
   cp .env.example .env

2. Edit the .env file

   Open .env and configure the required variables:

   # Database
   DATABASE_URL="postgresql://user:password@localhost:5432/myapp"
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
   CLERK_SECRET_KEY="sk_test_..."
   CLERK_WEBHOOK_SECRET="whsec_..."
   NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
   NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

3. Get your Clerk keys

   Sign in to the Clerk dashboard, create an application, and copy your Publishable Key and Secret Key from the API Keys page.

Caution

Never commit your .env file to version control. It’s already included in .gitignore.

Set Up the Database

RocketFuel uses Drizzle ORM with PostgreSQL. You’ll need a running PostgreSQL instance.

1. Start PostgreSQL

   If you don’t have PostgreSQL running, you can use Docker:

   docker run --name postgres -e POSTGRES_PASSWORD=password -p 5432:5432 -d postgres

   Or create a database on a hosted service like Neon, Supabase, or Railway.

2. Push the schema

   Once your database is running and DATABASE_URL is configured:

   npx drizzle-kit push

   This creates the necessary tables for authentication.

Next Steps

Your project is configured! Continue to Running Your App to start the development server and see it in action.