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 Better Auth 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:

   • Better Auth: 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/
│   │   │   └── auth/[...all]/route.ts    # Auth API routes
│   │   ├── (auth)/
│   │   │   ├── login/page.tsx            # Login page
│   │   │   └── signup/page.tsx           # Signup page
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── ui/                           # shadcn/ui components
│   ├── lib/
│   │   ├── auth.ts                       # Better Auth config
│   │   └── utils.ts
│   └── 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 (auth) folder uses Next.js route groups. Pages inside don’t add to the URL path, so /login maps to src/app/(auth)/login/page.tsx.

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"
   
   # Authentication
   BETTER_AUTH_SECRET="generate-a-secure-secret"
   BETTER_AUTH_URL="http://localhost:3000"

3. Generate a secure auth secret

   Use OpenSSL to generate a random secret:

   openssl rand -base64 32

   Copy the output and paste it as your BETTER_AUTH_SECRET.

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.