ESC
NextStarterAI logo
Menu
On this page

Getting Started

Hi Maker, welcome to NextStarter

Here is a quick overview of the NextStarter project structure and how you can get started with it.


We have created a simple and easy to use project structure that allows you to get started with your project immediately. Follow the steps below to get your development environment set up.

Start your development environment

1. To start your development environment, first you need to clone the NextStarter repository from GitHub, and then install the required dependencies.

1 2 git clone https://github.com/NextStarterAI/next-starter-ts [YOUR_APP_NAME] 3 cd [YOUR_APP_NAME] 4 yarn install 5 git remote remove origin

Note

Yarn is the recommended package manager for NextStarter.

2. After installing the required dependencies, rename environment variable file

1cp .env.example .env.local

3. Get your Supabase credentials and update the NEXT_PUBLIC_SUPABASE_ANON_KEY and NEXT_PUBLIC_SUPABASE_URL in .env.local file with your Supabase credentials.


4. Finally, run the development server using the following command:

1npm run dev

Project Structure

The NextStarter project structure is designed to be simple and easy to use.

/app → Pages (1 folder + page.tsx = 1 page)

/components → Reusable React components

/app/api → API routes

/libs → Utility functions (e.g. Stripe&LemonSqueezy integration, auth etc.)


.env File

.env file is used to store environment variables. You don't need to populate all of the environment variables, only use the ones you need as you go.

1 2 EMAIL_SERVER= 3 MAILGUN_API_KEY= 4 NEXT_PUBLIC_SUPABASE_URL= 5 NEXT_PUBLIC_SUPABASE_ANON_KEY= 6 SUPABASE_SERVICE_ROLE_KEY= 7 STRIPE_PUBLIC_KEY= 8 STRIPE_SECRET_KEY= 9 STRIPE_WEBHOOK_SECRET= 10 LEMONSQUEEZY_API_KEY= 11 LEMONSQUEEZY_STORE_ID= 12 LEMONSQUEEZY_WEBHOOK_SECRET=