Supastarter for Next.js

https://supastarter.dev/docs/
Admin
Supastarter for Next.js is a fullstack starter kit designed to accelerate the development of...
Tokens:108,204
Snippets:462
Trust Score:8.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://supastarter.dev/docs/sveltekit/setup

Navigate to your project root and run this command to start the local development server. Ensure you have pnpm installed.

```bash
pnpm dev
```

--------------------------------

### Storage Setup Guide Link

Source: https://supastarter.dev/docs/sveltekit/setup

A link to a guide that explains how to set up storage providers for Supastarter, which supports S3-compatible providers and Supabase Storage.

```link
https://supastarter.dev/docs/sveltekit/storage
```

--------------------------------

### Install Dependencies

Source: https://supastarter.dev/docs/nextjs/setup

Installs all project dependencies using pnpm. Ensure pnpm is installed globally before running this command.

```bash
pnpm install
```

--------------------------------

### Manual Supastarter Project Initialization

Source: https://supastarter.dev/docs/sveltekit/setup

Command to manually initialize a new Supastarter project. This command clones the repository, installs dependencies, and sets up the database.

```bash
npx supastarter new my-awesome-project
```

--------------------------------

### Supabase Database Connection String Example

Source: https://supastarter.dev/docs/nuxt/setup

An example of a PostgreSQL connection string format, commonly used with Supabase and other PostgreSQL-compatible databases.

```sql
postgresql://user:password@host:port/database
```

--------------------------------

### Prisma Database Connection String Example

Source: https://supastarter.dev/docs/sveltekit/setup

An example of a database connection string for PostgreSQL, used by Prisma as an ORM for database access in Supastarter projects.

```prisma
postgresql://user:password@host:port/database
```

--------------------------------

### Initialize Supastarter Project CLI

Source: https://supastarter.dev/docs/nuxt/setup

Command to create a new Supastarter project using the command-line interface. This command clones the repository, installs dependencies, and sets up the database.

```bash
npx supastarter new my-awesome-project
```

--------------------------------

### Initialize New Supastarter Project

Source: https://supastarter.dev/docs/nextjs/setup

Command to create a new Supastarter project. This command clones the repository, installs dependencies, and sets up the database based on user input for project name, database provider, and connection string.

```bash
npx supastarter new my-awesome-project
```

--------------------------------

### Start Nuxt Development Server

Source: https://supastarter.dev/docs/nuxt/setup

Navigate to your project's root directory and execute this command to launch the local development server. This command is typically used with pnpm package manager.

```bash
pnpm dev
```

--------------------------------

### Start Supastarter Development Server

Source: https://supastarter.dev/docs/nextjs/setup

Command to run the local development server for a Supastarter project. After execution, the application can be accessed at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Supabase Integration Blog Post

Source: https://supastarter.dev/docs/sveltekit/setup

A link to a blog post detailing the integration process with Supabase, a recommended database provider for Supastarter.

```link
https://supastarter.dev/blog/supabase-integration
```

--------------------------------

### Git Upstream Setup

Source: https://supastarter.dev/docs/nextjs/setup

Commands to initialize a new Git repository, add the Supastarter repository as an upstream origin, and make an initial commit.

```bash
rm -rf .git
git init
git remote add upstream https://github.com/supastarter/supastarter-nextjs.git
git add .
git commit -m "Initial commit"
```

--------------------------------

### Clone Supastarter Repository

Source: https://supastarter.dev/docs/nextjs/setup

Clones the Supastarter Next.js repository from GitHub. This is a manual step for setting up the project if the automated process encounters issues.

```bash
git clone https://github.com/supastarter/supastarter-nextjs.git
```

--------------------------------

### Database Schema Push and Generate

Source: https://supastarter.dev/docs/nextjs/setup

Commands to push the database schema to the database and generate the Prisma client.

```bash
pnpm --filter database push
```

```bash
pnpm --filter database generate
```

--------------------------------

### Run Development Server

Source: https://supastarter.dev/docs/nextjs/recipes/supabase-setup

Start the development server for your Supastarter project. This command also generates the Prisma client.

```bash
pnpm dev
```

--------------------------------

### Supabase Connection Strings

Source: https://supastarter.dev/docs/nextjs/recipes/supabase-setup

Example of environment variables for Supabase connection strings, including DATABASE_URL and DIRECT_URL.

```env
# The DATABASE_URL from step 1
DATABASE_URL=postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-[aws-region].pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1
# The DIRECT_URL from step 1
DIRECT_URL=postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-[aws-region].pooler.supabase.com:5432/postgres
```

--------------------------------

### Render.com Build and Start Commands

Source: https://supastarter.dev/docs/nextjs/deployment/render

Commands to build and start the application on Render.com. The build command ensures dependencies are installed and the application is built, while the start command runs the application using the specified filter.

```shell
corepack enable; pnpm install --frozen-lockfile; pnpm build
```

```shell
pnpm --filter=web start
```

--------------------------------

### Start Supastarter Development Server

Source: https://supastarter.dev/docs/nextjs/codebase/local-development

Starts the Supastarter development server using pnpm. This command assumes you have pnpm installed and have navigated to your Supastarter project directory.

```bash
pnpm dev
```

--------------------------------

### Supastarter Next.js Setup and Configuration

Source: https://supastarter.dev/docs/nextjs

Guides users through setting up and configuring the Supastarter Next.js project. Covers project structure, customization, and essential configuration parameters for building SaaS applications.

```nextjs
## [Setup](https://supastarter.dev/docs/nextjs/setup)
## [Configuration](https://supastarter.dev/docs/nextjs/configuration)
```

--------------------------------

### Supastarter Next.js Payments Setup

Source: https://supastarter.dev/docs/nextjs/payments/overview

Guides for setting up different payment providers within the Supastarter Next.js framework. This includes links to specific provider documentation.

```nextjs
## [Setup payment provider](https://supastarter.dev/docs/nextjs/payments/overview#setup-payment-provider)
Follow the setup guide for your preferred payment provider:
### [Stripe](https://supastarter.dev/docs/nextjs/payments/providers/stripe)### [Lemonsqueezy](https://supastarter.dev/docs/nextjs/payments/providers/lemonsqueezy)### [Creem](https://supastarter.dev/docs/nextjs/payments/providers/creem)### [Polar](https://supastarter.dev/docs/nextjs/payments/providers/polar)
```

--------------------------------

### Supabase Setup Recipe

Source: https://supastarter.dev/docs/nextjs/authentication/overview

Instructions for setting up Supabase within the Supastarter Next.js project. This recipe guides users through the necessary steps to integrate Supabase for database and authentication services.

```nextjs
https://supastarter.dev/docs/nextjs/recipes/supabase-setup
```

--------------------------------

### Environment Variables Setup

Source: https://supastarter.dev/docs/nextjs/setup

Configuration of environment variables for the Supastarter project. The `.env.local` file is used to store sensitive information like the database connection string.

```env
DATABASE_URL=postgresql://user:password@host:port/database
```

--------------------------------

### Next.js Supabase Setup Recipe

Source: https://supastarter.dev/docs/nextjs/seo/meta-tags

A recipe for setting up Supabase with a Next.js application using Supastarter. This guide likely covers database connection, authentication, and basic CRUD operations.

```javascript
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Example: Fetching data
async function getTodos() {
  const { data, error } = await supabase
    .from('todos')
    .select('*');

  if (error) {
    console.error('Error fetching todos:', error);
    return;
  }
  return data;
}

// Example: Inserting data
async function addTodo(task) {
  const { data, error } = await supabase
    .from('todos')
    .insert([
      { task: task, user_id: 'some-user-id' },
    ])
    .select();

  if (error) {
    console.error('Error adding todo:', error);
    return;
  }
  return data;
}
```

--------------------------------

### Next.js Setup

Source: https://supastarter.dev/docs/nextjs/seo/sitemap

Instructions for setting up a Next.js project with Supastarter, including initial configuration and dependencies.

```nextjs
[](https://supastarter.dev/docs/nextjs/setup)
```

--------------------------------

### Create Supastarter Project

Source: https://supastarter.dev/docs/nextjs/recipes/supabase-setup

Command to create a new Supastarter project. It prompts for database connection strings during setup.

```bash
npx supastarter new
```

--------------------------------

### Create Admin User CLI Script

Source: https://supastarter.dev/docs/nextjs/setup

This script is used to create a new admin user in the Supastarter application's database. It prompts the user for necessary information and generates credentials upon successful creation.

```bash
pnpm --filter scripts create:user
```

--------------------------------

### Database Configuration (Prisma)

Source: https://supastarter.dev/docs/nextjs/setup

Configures the database provider for Prisma in schema.prisma and auth.ts. Supports MySQL and MongoDB. Requires removing 'mode: "insensitive"' for MySQL.

```prisma
datasource db {
  provider = "mysql" // or "mongodb"
}
```

```typescript
export const auth = betterAuth({
	database: prismaAdapter(db, {
		provider: "mysql", // or "mongodb"
	}),
});
```

--------------------------------

### Next.js SEO: Sitemap

Source: https://supastarter.dev/docs/nextjs/seo/sitemap

Guides on implementing sitemaps for Next.js applications using Supastarter. This section covers the setup and configuration required for effective SEO.

```nextjs
[](https://supastarter.dev/docs/nextjs/seo/sitemap)
```

--------------------------------

### Preview Mail Templates Locally

Source: https://supastarter.dev/docs/sveltekit/mailing/overview

Starts a local development server to preview email templates. This command is run from the root of your project. If issues arise, installing dependencies within the `packages/mail/.react-email` subdirectory might be necessary.

```bash
pnpm mail:preview
```

```bash
# run this in packages/mail/.react-email
npm i
```

--------------------------------

### Payment Provider Configuration

Source: https://supastarter.dev/docs/nextjs/setup

Sets the payment provider for handling payments. Supports Stripe, Lemonsqueezy, Creem, and Polar.

```typescript
export * from "./stripe";
// or export * from './lemonsqueezy';
// or export * from './creem';
// or export * from './polar';
```

--------------------------------

### Database Configuration (Drizzle)

Source: https://supastarter.dev/docs/nextjs/setup

Configures the database provider for Drizzle in index.ts and auth.ts. Supports MySQL, SQLite, and PostgreSQL. Requires exporting the correct schema file.

```typescript
export * from "./drizzle";
```

```typescript
export const auth = betterAuth({
	database: drizzleAdapter(db, {
		provider: "mysql", // or "sqlite" or "pg"
	}),
});
```

```typescript
export * from "./postgres";
// or export * from "./mysql";
// or export * from "./sqlite";
```

```typescript
import { drizzle } from "drizzle-orm/node-postgres";
import * as schema from "./schema/postgres";
const databaseUrl = process.env.DATABASE_URL as string;
if (!databaseUrl) {
	throw new Error("DATABASE_URL is not set");
}
export const db = drizzle(databaseUrl, {
	schema,
});
```

--------------------------------

### Run Database Migrations

Source: https://supastarter.dev/docs/nextjs/recipes/supabase-setup

Command to push the database schema to Supabase after configuring the connection strings and schema.

```bash
pnpm --filter database push
```

--------------------------------

### Starting Local Services with Docker Compose

Source: https://supastarter.dev/docs/nextjs/codebase/local-development

Commands to start and verify the status of local services defined in the docker-compose.yml file.

```bash
docker-compose up -d

docker-compose ps
```

--------------------------------

### Build a Feedback Widget Recipe

Source: https://supastarter.dev/docs/nextjs/authentication/overview

A guide on how to build a feedback widget for your Supastarter Next.js application. This recipe provides steps and potentially code examples for implementing this feature.

```nextjs
https://supastarter.dev/docs/nextjs/recipes/build-a-feedback-widget
```

--------------------------------

### Install QStash SDK

Source: https://supastarter.dev/docs/nextjs/tasks/qstash

Installs the Upstash QStash SDK for the API package using pnpm.

```bash
pnpm add --filter api @upstash/qstash
```

--------------------------------

### Manually Generate Prisma Client

Source: https://supastarter.dev/docs/nextjs/recipes/supabase-setup

Command to manually generate the Prisma client for database interactions.

```bash
pnpm --filter database generate
```

--------------------------------

### Supastarter Next.js Recipes

Source: https://supastarter.dev/docs/nextjs

Provides specific recipes and guides for common tasks within the Supastarter Next.js project, such as setting up Supabase and building a feedback widget.

```nextjs
[Supabase setup](https://supastarter.dev/docs/nextjs/recipes/supabase-setup)
[Build a Feedback Widget](https://supastarter.dev/docs/nextjs/recipes/build-a-feedback-widget)
```

--------------------------------

### Next.js Recipes: Supabase Setup

Source: https://supastarter.dev/docs/nextjs/seo/sitemap

A recipe for setting up Supabase with a Next.js project using Supastarter. Details the integration process and configuration steps.

```nextjs
[](https://supastarter.dev/docs/nextjs/recipes/supabase-setup)
```

--------------------------------

### Build and Start API Service (Node.js Server)

Source: https://supastarter.dev/docs/nextjs/deployment/standalone-api

Commands to build and start the API service for deployment as a Node.js server, typically used with platforms like Render.

```bash
# Build the API service
corepack enable; pnpm install --frozen-lockfile; pnpm --filter @repo/api-app build
# Start the API service
pnpm --filter @repo/api-app start

```

--------------------------------

### Install Vemetric React Package

Source: https://supastarter.dev/docs/nextjs/analytics/vemetric

Installs the Vemetric React package for your Supastarter web application. This is the first step to integrating Vemetric analytics.

```bash
pnpm add --filter web @vemetric/react
```

--------------------------------

### Drizzle ORM PostgreSQL Client Setup

Source: https://supastarter.dev/docs/nextjs/database/overview

Set up the Drizzle database client in `packages/database/drizzle/client.ts` for PostgreSQL.

```typescript
import { drizzle } from "drizzle-orm/node-postgres";
import * as schema from "./schema/postgres";
const databaseUrl = process.env.DATABASE_URL as string;
if (!databaseUrl) {
	throw new Error("DATABASE_URL is not set");
}
export const db = drizzle(databaseUrl, {
	schema,
});
```

--------------------------------

### Next.js Recipes: Build a Feedback Widget

Source: https://supastarter.dev/docs/nextjs/seo/sitemap

A guide on building a feedback widget for Next.js applications using Supastarter. Provides steps for implementation and customization.

```nextjs
[](https://supastarter.dev/docs/nextjs/recipes/build-a-feedback-widget)
```

--------------------------------

### Onboarding Best Practices

Source: https://supastarter.dev/docs/nextjs/customization/onboarding

Guidelines for implementing a robust and user-friendly onboarding experience. Emphasizes state management with `onCompleted`, Zod for validation, Shadcn UI components, responsive design, and automatic progress bar updates.

```text
1. State Management:
   - Use the `onCompleted` prop to handle navigation between steps.
   - For the final step, call the main `onCompleted` function to finish onboarding.
2. Form Validation:
   - Always use Zod schemas for form validation.
   - Include proper error handling and error messages.
3. UI Components:
   - Use Shadcn UI components for consistency.
   - Follow the existing pattern of using `Form`, `FormField`, `FormItem`, etc.
4. Responsive Design:
   - Ensure your step component works well on both mobile and desktop.
   - Use Tailwind's responsive classes when needed.
5. Progress Indicator:
   - The progress bar will automatically update based on the number of steps in the `steps` array.
```

--------------------------------

### Onboarding Example Flow

Source: https://supastarter.dev/docs/nextjs/customization/onboarding

Illustrates the typical user journey through the onboarding process, including URL parameter usage for step tracking and redirection upon completion.

```text
1. User starts at step 1 (`?step=1`).
2. After completing step 1, they're moved to step 2 (`?step=2`).
3. After completing the final step, they're redirected to the app dashboard.
```

--------------------------------

### Supastarter SvelteKit Features Overview

Source: https://supastarter.dev/docs/sveltekit

This section outlines the key features of the Supastarter SvelteKit starter kit, including its landing page, authentication system, team management capabilities, billing integration, dashboard, and blog functionality. It serves as a high-level overview of what the starter kit offers.

```sveltekit
Features:
  - Landing page with Hero, Features, FAQ, Newsletter signup
  - Pricing page
  - Changelog page
  - Terms of service and Privacy policy placeholder pages
  - Sign up and login pages
  - Forgot password and password reset functionality
  - Settings page for profile and password updates
  - Avatar upload
  - Teams/Organizations for resource sharing
  - Team roles (owner, member)
  - Team settings for name updates and deletion
  - Billing settings for subscription management
  - Support for multiple plans and payment providers (Polar, Creem, Stripe, Lemonsqueezy)
  - Dashboard page
  - Settings page
  - AI integration example with Vercel AI SDK
  - Blog and blog post pages
  - Content managed with MDX
  - Support for blog post translations
```

--------------------------------

### Onboarding Notes and Implementation Details

Source: https://supastarter.dev/docs/nextjs/customization/onboarding

Provides key considerations for implementing the onboarding flow, such as URL parameter management, optional cookie-based state tracking, and the requirement for client components.

```text
- The onboarding state is tracked in the URL using the `step` query parameter.
- For more robustness, consider adding an `onboardingStep` cookie to track the step if the user navigates away and returns.
- The final `onCompleted` function updates the user's `onboardingComplete` status and redirects to the app.
- Each step component must be a client component (use "use client" directive).
```

--------------------------------

### Create Documentation Page (SvelteKit)

Source: https://supastarter.dev/docs/sveltekit/documentation

Demonstrates how to create a new documentation page using an MDX file in the 'content/documentation' directory. Includes frontmatter for title and subtitle.

```mdx
---
title: Documentation
subtitle: Learn how to use our software
---
Your content here
```

--------------------------------

### Supastarter Nuxt Features Overview

Source: https://supastarter.dev/docs/nuxt

Provides an overview of the features included in the Supastarter Nuxt starter kit. This includes landing page sections, authentication flows, team management capabilities, billing and payment integration, internationalization support, a dashboard example, and a blog system.

```Nuxt.js
Features:
- Landing page with Hero, Features, FAQ, Newsletter signup
- Pricing page
- Changelog page
- Terms of service and Privacy policy placeholder pages
- Sign up and login pages
- Forgot password and password reset functionality
- Settings page for profile and password updates, and avatar upload
- Teams/Organizations for resource sharing with roles (owner, member)
- Team settings for name updates and deletion, and avatar upload
- Billing settings for subscription management
- Support for multiple plans and pricing tiers
- Support for Stripe and Lemonsqueezy payment providers
- Support for multiple locales and language switching
- Support for different currencies based on locale (Stripe only)
- Fully translatable pages
- Automatic language detection based on browser settings
- Included translations for German and English
- Dashboard page
- Settings page
- Example of AI integration with Vercel AI SDK
- Blog and blog post pages
- Content managed with MDX
- Support for blog post translations
```

--------------------------------

### AI Chatbot Usage in Supastarter

Source: https://supastarter.dev/docs/nextjs/ai/overview

Learn how to integrate and utilize the AI chatbot functionality within your Supastarter application. This guide covers setup and basic interaction patterns.

```nextjs
import { Chatbot } from '@supastarter/ai';

// Initialize the chatbot
const chatbot = new Chatbot({
  // Configuration options
});

// Example usage
async function sendMessage(message) {
  const response = await chatbot.sendMessage(message);
  console.log(response);
}
```

--------------------------------

### Create New Blog Post in Supastarter SvelteKit

Source: https://supastarter.dev/docs/sveltekit/blog

Instructions for creating a new blog post by adding an MDX file to the /apps/web/content/posts directory. The filename determines the URL slug. Includes frontmatter for metadata and MDX for content.

```mdx
--- 
title: My awesome blog post
date: 2023-02-28
image: /images/blog/cover.png
authorName: Elon Musk
authorImage: /images/blog/elon-musk.jpg
excerpt: In this post I'm going to tell you about my awesome blog.
tags: [awesome, post]
published: true
---

# My awesome blog post
In this post I'm going to tell you about my awesome blog.
```

--------------------------------

### Mail Provider Configuration

Source: https://supastarter.dev/docs/nextjs/setup

Selects the mail provider for sending transactional emails. Supports Plunk, Resend, Postmark, and Nodemailer. Requires setting specific environment variables for each provider.

```typescript
export * from "./plunk";
// or export * from './resend';
// or export * from './postmark';
// or export * from './nodemailer';
```

--------------------------------

### SEO Best Practices for Marketing Pages

Source: https://supastarter.dev/docs/nextjs/launch

Covers essential SEO configurations for marketing pages to ensure they are discoverable and indexed by search engines. Recommends setting meta titles and descriptions for all pages and including indexable pages in the sitemap.

```markdown
All pages should have a meta title and description.
Pages intended for indexing must be included in the sitemap.
```

--------------------------------

### Coolify Application Build Configuration for Supastarter Next.js

Source: https://supastarter.dev/docs/nextjs/deployment/coolify

Configures the build settings for a Supastarter Next.js application within Coolify, specifying installation, build commands, and the start directory.

```coolify
Install Command : pnpm install
Build Command : corepack enable; pnpm install --frozen-lockfile; pnpm build
Start Directory : pnpm --filter web start
```

--------------------------------

### Supastarter Next.js Features Overview

Source: https://supastarter.dev/docs/nextjs

Provides an overview of the features included in the Supastarter Next.js starter kit, including marketing site pages, SaaS application functionalities like authentication and user management, and administrative tools.

```nextjs
### [Marketing site](https://supastarter.dev/docs/nextjs#marketing-site)
#### [Home](https://supastarter.dev/docs/nextjs#home)
#### [Features](https://supastarter.dev/docs/nextjs#features-1)
#### [Pricing](https://supastarter.dev/docs/nextjs#pricing)
#### [Blog](https://supastarter.dev/docs/nextjs#blog)
#### [Contact](https://supastarter.dev/docs/nextjs#contact)
#### [Footer](https://supastarter.dev/docs/nextjs#footer)

### [SaaS application](https://supastarter.dev/docs/nextjs#saas-application)
#### [Authentication](https://supastarter.dev/docs/nextjs#authentication)
##### [Login](https://supastarter.dev/docs/nextjs#login)
##### [Signup](https://supastarter.dev/docs/nextjs#signup)
##### [Forgot password](https://supastarter.dev/docs/nextjs#forgot-password)

### [User](https://supastarter.dev/docs/nextjs#user)
#### [User dashboard](https://supastarter.dev/docs/nextjs#user-dashboard)
#### [Account Settings](https://supastarter.dev/docs/nextjs#account-settings)
##### [General](https://supastarter.dev/docs/nextjs#general)
##### [Security](https://supastarter.dev/docs/nextjs#security)
##### [Billing](https://supastarter.dev/docs/nextjs#billing)

### [Organizations](https://supastarter.dev/docs/nextjs#organizations)
#### [Organization dashboard](https://supastarter.dev/docs/nextjs#organization-dashboard)
#### [Organization settings](https://supastarter.dev/docs/nextjs#organization-settings)
##### [General](https://supastarter.dev/docs/nextjs#general-1)
#### [Organization members](https://supastarter.dev/docs/nextjs#organization-members)

### [Administration](https://supastarter.dev/docs/nextjs#administration)
#### [Users](https://supastarter.dev/docs/nextjs#users)
```

--------------------------------

### Install PostHog Package

Source: https://supastarter.dev/docs/nextjs/analytics/posthog

Install the posthog-js package for your web application using pnpm.

```bash
pnpm add --filter web posthog-js
```

--------------------------------

### Payment Provider Setup for Products and Subscriptions

Source: https://supastarter.dev/docs/nextjs/launch

Ensures products and subscriptions are correctly configured in the payment provider's production mode. This includes setting up prices for different billing cycles (monthly, yearly) and currencies.

```markdown
Ensure products or subscriptions are set up in `production` mode with the payment provider.
Verify all prices are correctly configured (e.g., monthly, yearly).
Configure supported currencies for each language if offering multi-currency support.
```

--------------------------------

### Install Sentry SDK for Next.js

Source: https://supastarter.dev/docs/nextjs/monitoring/sentry

Installs the Sentry SDK for Next.js using pnpm. This is the first step in integrating Sentry into your application.

```bash
pnpm --filter web add @sentry/nextjs
```

--------------------------------

### Install Package with pnpm

Source: https://supastarter.dev/docs/nextjs/codebase/dependencies

Installs a package either globally to the monorepo root or to a specific workspace. pnpm is used for its efficiency and monorepo support.

```bash
pnpm add -w <package-name>
```

```bash
pnpm add --filter <workspace-name> <package-name>
```

--------------------------------

### Install Vercel Analytics Package

Source: https://supastarter.dev/docs/nextjs/analytics/vercel

Installs the Vercel Analytics package for the web application using pnpm. This is a prerequisite for enabling Vercel Analytics.

```bash
pnpm add --filter web @vercel/analytics
```

--------------------------------

### Webhook Configuration for Payment Providers

Source: https://supastarter.dev/docs/nextjs/launch

Details the setup of webhooks for payment providers to synchronize purchases with the database. Emphasizes using production keys and ensuring the webhook URL points to the production environment.

```markdown
Use `production` keys and environment variables from the payment provider.
Ensure the webhook is configured to point to your production URL.
```

--------------------------------

### Install Mixpanel Packages

Source: https://supastarter.dev/docs/nextjs/analytics/mixpanel

Install the necessary Mixpanel browser and node packages for your Next.js project using pnpm. This includes the client-side library and types for server-side integration.

```bash
pnpm add --filter web mixpanel-browser
pnpm add --filter web -D @types/mixpanel-node
```

--------------------------------

### Example AI Response for Product Names

Source: https://supastarter.dev/docs/nextjs/ai/prompts

This is an example of a JSON response that an AI might return when asked to generate product names. The data is structured as an array of objects, each with a 'name' property.

```json
[
    {"name": "Bark Bites: Woof-tastic Chews"},
    {"name": "Paw-some Pâté: Tail-Wagging Treats"},
    {"name": "Mutt Munchies: Canine Crunchies"},
    {"name": "Fido's Feast: Bark-quet Delights"},
    {"name": "Pup-ular Chow: Snout-Approved Snacks"}
]
```

--------------------------------

### Start ngrok Tunnel for Local Webhook Testing (Bash)

Source: https://supastarter.dev/docs/nextjs/payments/providers/lemonsqueezy

Starts an ngrok tunnel to expose the local development server (running on port 3000) to the internet, allowing Lemonsqueezy webhooks to be tested locally. The generated ngrok URL is then appended with `/api/webhooks/payments`.

```bash
ngrok http 3000
```

--------------------------------

### Folder Structure and Customization (SvelteKit)

Source: https://supastarter.dev/docs/sveltekit/documentation

Illustrates the folder structure for documentation content and explains how to use 'meta.json' to customize titles and the order of directories and pages.

```json
{
  "items": {
    "getting-started": "Getting Started",
    "usage": "Usage",
    "installation": "Installation"
  }
}
```

--------------------------------

### Next.js Troubleshooting

Source: https://supastarter.dev/docs/nextjs/seo/sitemap

A guide to troubleshooting common issues encountered when working with Next.js and Supastarter.

```nextjs
[](https://supastarter.dev/docs/nextjs/troubleshooting)
```
Tokens:
Raw