
To set up payment integration with Lemon Squeezy:

1. Create a [Lemon Squeezy Account](https://www.lemonsqueezy.com/).
2. Set up your store:
   - Add branding and configure settings.
3. Create products and variants:
   - Define your pricing plans and features.
4. Configure webhooks:
   - Add a webhook URL in Lemon Squeezy: `https://<your-domain-name>/api/webhooks/lemon-squeezy`.
5. Add API keys to your `.env.local` file:

```bash
LEMON_SQUEEZY_API_KEY=your_api_key
LEMON_SQUEEZY_WEBHOOK_SIGNATURE=your_webhook_secret
LEMON_SQUEEZY_STORE_ID=your_store_id
NEXT_PUBLIC_LEMON_SQUEEZY_BASIC_VARIANT_ID=your_variant_id
```

Replace the placeholders with the actual values from your Lemon Squeezy dashboard.

Refer to the [Lemon Squeezy API Documentation](https://docs.lemonsqueezy.com/) for more details.


Payment Integration with LemonSqueezy


Follow these steps to set up MongoDB for your project:

1. Create a [MongoDB Atlas Account](https://www.mongodb.com/atlas/database).
2. Set up a new cluster:
   - Choose a cloud provider and region.
   - Configure your cluster settings.
3. Obtain your connection string:
   - In the cluster view, click Connect and select Connect Your Application.
   - Copy the provided connection string.
4. Add the connection string to the `.env.local` file:

```bash
MONGODB_URI=your_mongodb_uri
```

Replace `your_mongodb_uri` with the actual connection string, making sure to include your username, password, and database name.

---

### How to Get MongoDB Working with Vercel for Your Next.js SaaS

If you're planning to host your Next.js SaaS application on Vercel and use MongoDB as your database, follow these steps to ensure everything works smoothly:

---

#### Step-by-Step Guide to Setting Up MongoDB with Vercel

1. **Access MongoDB Cloud**  
   Log in to your [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) account.

2. **Navigate to Network Access**

   - In the left sidebar, click on the **Security** tab.
   - From the dropdown, select **Network Access**.

3. **Add an IP Address**

   - In the **IP Access List** section, click the `ADD IP ADDRESS` button.
   - Enter the following IP address in the **Access Entry List**:
     ```
     0.0.0.0/0
     ```
   - This grants access from any IP address. Be cautious with this setting and restrict it later if needed for security purposes.

4. **Confirm the Changes**  
   Click the **Confirm** button to save your changes.

---

#### Important Notes:

- **Security Considerations**: Allowing `0.0.0.0/0` means MongoDB will accept connections from all IPs. This is fine for initial development or testing but should be tightened for production. Use specific IPs or Vercel's [IP allowlist](https://vercel.com/docs) for better security.
- **Connection String**: Make sure you update your `.env` file in your Next.js project with your MongoDB connection string.

---

That’s it! You’ve successfully set up MongoDB to work with your Vercel-hosted Next.js SaaS.

By following these steps, you can quickly connect your app to MongoDB and start building.

---

For more help, visit the [MongoDB Atlas Documentation](https://www.mongodb.com/docs/atlas/).


MongoDB Setup


This boilerplate uses NextAuth.js with Google Authentication. Follow these steps to set it up:

1. Visit the [Google Cloud Console](https://console.cloud.google.com/).
2. Create a new project or select an existing one.
3. Enable OAuth 2.0 by navigating to APIs & Services > Credentials.
4. Configure the OAuth consent screen:
   - Fill out app details, such as name and authorized domains.
   - Add required scopes for authentication.
5. Create credentials (OAuth Client ID):
   - Select "Web Application" as the application type.
   - Add authorized redirect URLs:
     - `http://localhost:3000/api/auth/callback/google`
     - `https://<your-domain-name>/api/auth/callback/google`
6. Copy the Client ID and Client Secret to your `.env.local` file:

```bash
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
```

For more details, refer to [Google OAuth Setup Documentation](https://developers.google.com/identity/protocols/oauth2).


Authentication Setup


The Next.js Startup Boilerplate requires configuration for various services and integrations. This section provides an overview of the configuration process.

## Environment Variables

Create a `.env.local` file in the project root and add the following variables:

```bash
# -----------------------------------------------------
# NEXT-AUTH CONFIGURATION
# -----------------------------------------------------
NEXTAUTH_SECRET=your_secret_key
NEXTAUTH_URL=http://localhost:3000

# -----------------------------------------------------
# GOOGLE PROVIDER
# -----------------------------------------------------
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret

# -----------------------------------------------------
# MONGODB
# -----------------------------------------------------
MONGODB_URI=your_mongodb_uri

# -----------------------------------------------------
# LEMON SQUEEZY PAYMENT INTEGRATION
# -----------------------------------------------------
LEMON_SQUEEZY_API_KEY=your_api_key
LEMON_SQUEEZY_WEBHOOK_SIGNATURE=your_webhook_secret
LEMON_SQUEEZY_STORE_ID=your_store_id
NEXT_PUBLIC_LEMON_SQUEEZY_BASIC_VARIANT_ID=your_variant_id
```

::: tip
💡 Tip: Generate `NEXTAUTH_SECRET` using this command:

```bash
openssl rand -base64 32
```

:::

| **Variable**                                 | **Source**                                        |
| -------------------------------------------- | ------------------------------------------------- |
| `NEXTAUTH_SECRET`                            | Generate using `openssl` command                  |
| `NEXTAUTH_URL`                               | Localhost URL for development or your live domain |
| `GOOGLE_CLIENT_ID` / `GOOGLE_CLIENT_SECRET`  | Google Cloud Console, OAuth credentials           |
| `MONGODB_URI`                                | MongoDB Dashboard                                 |
| `LEMON_SQUEEZY_API_KEY`                      | Lemon Squeezy Dashboard, API Keys                 |
| `LEMON_SQUEEZY_WEBHOOK_SIGNATURE`            | Lemon Squeezy Dashboard, Webhook configuration    |
| `LEMON_SQUEEZY_STORE_ID`                     | Lemon Squeezy Dashboard, Store Settings           |
| `NEXT_PUBLIC_LEMON_SQUEEZY_BASIC_VARIANT_ID` | Lemon Squeezy Dashboard, Product Variants         |

By setting these environment variables, your application will be ready to connect to all required services.


Configuration


The Next.js Startup Boilerplate follows this structure:

```bash
src/
├── components/     # Reusable UI components
├── config/         # App configuration
├── content/        # Blog markdown files
├── hooks/          # Custom React hooks
├── lib/            # Utility functions
├── models/         # MongoDB models
├── pages/          # Next.js pages
└── styles/         # Global styles
```


Project Structure


Before starting with the Next.js Startup Boilerplate, ensure you have the following:

1. [Node.js](https://nodejs.org/en/) installed on your system
2. A [MongoDB](https://www.mongodb.com) database set up
3. [Google OAuth credentials](https://console.cloud.google.com/) for authentication
4. A [Lemon Squeezy](https://www.lemonsqueezy.com/) account for payment integration

These prerequisites are essential for the full functionality of the boilerplate. Make sure you have access to all of these before proceeding with the setup.


Prerequisites


Here are some helpful resources for working with the technologies used in this boilerplate:

- **Next.js Official Docs:** [https://nextjs.org/docs](https://nextjs.org/docs)
- **MongoDB Atlas Guides:** [https://www.mongodb.com/docs/atlas/](https://www.mongodb.com/docs/atlas/)
- **NextAuth.js Guides:** [https://next-auth.js.org/getting-started/introduction](https://next-auth.js.org/getting-started/introduction)
- **Lemon Squeezy API Docs:** [https://docs.lemonsqueezy.com/](https://docs.lemonsqueezy.com/)
- **ShadCN:** [https://shadcn.dev/](https://shadcn.dev/)
- **Tailwind CSS Docs:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs)

These resources will provide in-depth information on each technology and help you make the most of the Next.js Startup Boilerplate.


Additional Resources


## Development Best Practices

- Use [ESLint](https://eslint.org/) for linting your code.
- Format your code with [Prettier](https://prettier.io/).
- Follow the [Next.js Documentation](https://nextjs.org/docs/) for deeper insights.

## SEO Optimization

- Edit the `next-seo.config.js` file under the `config/` directory.
- Use the [Next SEO Plugin](https://github.com/garmeeh/next-seo) to manage meta tags.

## Deploying to Production

1. Host your app on [Vercel](https://vercel.com/) or [AWS](https://aws.amazon.com/).
2. Set up production environment variables in your hosting dashboard.
3. Ensure proper domain configuration for Google OAuth and Lemon Squeezy webhooks.


Additional Tips


This boilerplate leverages ShadCN UI Components for building reusable, elegant, and highly customizable UI components.

## Customizing ShadCN Components

1. Locate the components in the `src/components/` directory.
2. Modify the component files as needed, adjusting Tailwind classes, structure, or functionality.
3. Create new components by adding new files in the `src/components/` directory.
4. Update the Tailwind theme in `tailwind.config.js` for global style changes.
5. Use custom variants for components to support additional styles.

For more information, refer to the [ShadCN Documentation](https://shadcn.dev/) and [Tailwind CSS Customization](https://tailwindcss.com/docs/theme).


ShadCN UI Components


The boilerplate includes a blog system that uses Markdown for content creation. Here's how to use it:

1. Add your blog posts as `.md` files in the `src/content/blog/` folder.
2. Use the pre-configured Markdown renderer to display blog content.
3. Customize your blog design in the `components/` directory.

Each Markdown file should include frontmatter with metadata about the post, for example:

```markdown
---
title: My First Blog Post
date: "2023-01-01"
excerpt: This is a short description of the blog post
author: Your Name
---

# My First Blog Post

Content goes here...
```


Blog System with Markdown


Before diving into the Next.js Startup Boilerplate, ensure you have the following prerequisites in place:

## Development Environment

1. **Node.js**: Install the latest LTS version of [Node.js](https://nodejs.org/en/).

   - Recommended: Use a version manager like [nvm](https://github.com/nvm-sh/nvm) for easy Node.js version management.

2. **Code Editor**: A modern code editor like [Visual Studio Code](https://code.visualstudio.com/) with extensions for JavaScript and React.

## Required Accounts

1. **MongoDB Atlas Account**:

   - Sign up for a free account at [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register).
   - You'll use this to set up your database cluster.

2. **Google Cloud Platform Account**:

   - Create or use an existing account at [Google Cloud Console](https://console.cloud.google.com/).
   - This is necessary for setting up Google OAuth for authentication.

3. **Lemon Squeezy Account**:
   - Sign up at [Lemon Squeezy](https://www.lemonsqueezy.com/register).
   - You'll use this for payment integration and subscription management.

## Installing libraries

You can just open your terminal in folder and run following command and it will install everything that is required.

```bash
npm install
```

## Knowledge Base

While not strictly required, familiarity with the following technologies will be beneficial:

- Basic understanding of React and Next.js
- Familiarity with MongoDB and NoSQL databases
- Knowledge of RESTful APIs and OAuth 2.0 flow
- Understanding of Tailwind CSS for styling

With these prerequisites in place, you'll be well-prepared to make the most of the Next.js Startup Boilerplate. In the next sections, we'll guide you through the setup and configuration process.


Prerequisites for Next.js Startup Boilerplate


The Next.js Startup Boilerplate comes packed with a variety of features and integrations to jumpstart your SaaS development. Here's what you'll find:

## Core Technologies

- ⚡ **Next.js 14+**: Utilizing the Pages Router for optimal performance and SEO.
- 🗄️ **MongoDB Integration**: Robust database solution for scalable data management.
- 🎨 **Tailwind CSS + Shadcn UI**: Modern, utility-first CSS framework paired with customizable UI components.

## Authentication and Security

- 🔐 **NextAuth.js**: Flexible authentication with Google sign-in support.
- 🔒 **Built-in Security Features**: Leveraging Next.js and NextAuth.js security best practices.

## Payment Integration

- 💳 **Lemon Squeezy**: Seamless payment processing and subscription management.

## Content Management

- 📝 **Blog System**: Built-in blog functionality with Markdown support for easy content creation.

## User Experience

- 🌓 **Dark/Light Mode**: Toggle between color schemes for user comfort.
- 📱 **Responsive Design**: Fully responsive layout that works on all devices.

## SEO and Performance

- 🔍 **SEO Optimization**: Pre-configured for excellent search engine visibility.
- ⚡ **Performance Optimized**: Leveraging Next.js features for fast load times and smooth user experience.

These features provide a solid foundation for your SaaS application, allowing you to focus on building your unique value proposition rather than reinventing the wheel.


Features of the Next.js Startup Boilerplate


Welcome to the comprehensive guide for the Next.js Startup Boilerplate. This powerful toolkit is designed to accelerate your SaaS application development process by providing a robust foundation with pre-integrated features and technologies.

## What is the Next.js Startup Boilerplate?

The Next.js Startup Boilerplate is a carefully crafted starting point for building modern, scalable SaaS applications. It combines the power of Next.js with a selection of essential tools and services, allowing you to focus on building your unique features rather than setting up infrastructure.

## Why Use This Boilerplate?

- **Save Time**: Skip the tedious setup process and jump straight into development.
- **Best Practices**: Benefit from industry-standard patterns and practices out of the box.
- **Scalability**: Start with a structure that's ready to grow with your application.
- **Integrated Services**: Essential services like authentication and payments are pre-configured.

In the following sections, we'll guide you through the features, setup process, and best practices for using this boilerplate. Let's get started on your journey to building a successful SaaS application!


Setup Boilerplate

Posts