This repository contains the code for building a SaaS AI Platform using Next.js 13, React, Tailwind, Prisma, and Stripe. The project includes various features and integrations to create a comprehensive AI-powered platform.
- Tailwind Design: Utilizes Tailwind CSS for styling and design.
- Animations and Effects: Incorporates Tailwind CSS for animations and effects.
- Full Responsiveness: Ensures full responsiveness across devices.
- Clerk Authentication: Provides authentication options such as Email, Google, and 9+ Social Logins through Clerk.
- Client Form Validation: Utilizes react-hook-form for client-side form validation and handling.
- Server Error Handling: Implements react-toast for server error handling.
- AI Tools: Includes various AI tools such as Image Generation (Open AI), Video Generation (Replicate AI), Conversation Generation (Open AI), and Music Generation (Replicate AI).
- Page Loading State: Manages page loading state for a seamless user experience.
- Stripe Integration: Offers Stripe monthly subscription with a free tier and API limiting.
- RESTful API: Demonstrates how to write POST, DELETE, and GET routes in route handlers (app/api).
- Direct Database Access: Fetches data in server react components directly from the database (WITHOUT API! like Magic!).
- Component Relations: Handles relations between Server and Child components effectively.
- Layout Reusability: Demonstrates how to reuse layouts efficiently.
- Folder Structure: Utilizes the folder structure in Next.js 13 App Router for a well-organized codebase.
- Node.js version 18.x.x
- Cloning the Repository:
git clone https://github.com/AntonioErdeljac/next13-ai-saas.git
- Install Packages::
npm install
- Setup Environment Variables::
- Create a
.env
file and add the following variables:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY= NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard OPENAI_API_KEY= REPLICATE_API_TOKEN= DATABASE_URL= STRIPE_API_KEY= STRIPE_WEBHOOK_SECRET= NEXT_PUBLIC_APP_URL=https://localhost:3000
- Setup Prisma::
- Add MySQL Database (e.g., using PlanetScale).
- Run the following command to apply migrations:
``
npx prisma db push
- Start the App::
npm run dev
- Available Commands:
- dev: Starts a development instance of the app.