Skip to main content

Get started

Let's discover Boilerplate in less than 5 minutes.

Note: This project uses Material Tailwind sections and components to provide a consistent and visually appealing design across the application.

Start a local server​

Get started by creating a new site.

  1. Download the project and run npm install.
warning

The project requires Node 18.17 or greater. Type node -v in your terminal to check version.

  • Node.js version 18.0 or above:
    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.
  1. Rename .env.example to .env.local
mv .env.example .env.local
  1. Open http://localhost:3000 to see your site.

NextJS project structure overview​

This project is organized to enhance readability, maintainability, and scalability, making it easier for developers to navigate and contribute. Below is an overview of the key directories and files in the project structure:

.next​

This folder contains the build output of the Next.js application. It is automatically generated and managed by Next.js, and typically not manually modified by developers.

app​

The app directory houses the core application files and is further divided into specific functionalities:

  • admin: Administrative components and pages.
  • api: API routes for handling server-side functionality.
  • checkout-success: Handles post-checkout success logic and components.
  • example-page: Sample page for reference or initial setup.
  • pricing-lemon-squeezy: Components and pages related to Lemon Squeezy pricing integration.
  • pricing-stripe: Components and pages related to Stripe pricing integration.

components​

Contains reusable React components that are used throughout the application, promoting modularity and reusability.

hooks​

Includes custom React hooks to encapsulate and manage stateful logic, such as useSeo.tsx for managing SEO-related state and effects.

layout​

Holds layout components like ClientLayout.tsx that define the structure and common layout of various pages in the application.

lib​

Library files for utility functions and configurations:

  • connectDB.ts: Manages database connection logic.
  • mongoDb.ts: Specific MongoDB related utilities and configurations.
  • stripe.ts: Stripe-related utilities and configuration for handling payments.

models​

Contains the application's data models, such as User.ts, which define the schema and interaction with the database.

public​

Static assets like images, icons, and other public resources that can be accessed directly by the client.

types​

TypeScript definition files, including nextAuth.ts for defining types related to authentication.

utils​

Utility files for various functionalities, such as:

  • mailgun.ts: Utilities for handling Mailgun integration.
  • sendgrid.ts: Utilities for handling SendGrid integration.

This structure helps in maintaining a clean and organized codebase, making development more efficient and scalable.

Environment Variables​

This project makes use of environment variables to manage configuration settings for various services and integrations. Below is a detailed explanation of the environment variables used in the project.

MongoDB​

  • DATABASE_URL: The connection string for your MongoDB database.

NextAuth​

  • NEXTAUTH_SECRET: A secret key used to encrypt session tokens.

Social Login​

  • GOOGLE_CLIENT_ID: The Client ID for Google OAuth.
  • GOOGLE_CLIENT_SECRET: The Client Secret for Google OAuth.
  • CALLBACK_URL: The URL to redirect to after successful login, set to /admin/customers.

Mailgun​

  • MAILGUN_API_KEY: The API key for Mailgun integration.
  • MAILGUN_DOMAIN: The domain for Mailgun.
  • MAILGUN_FROM_EMAIL: The default sender email address, e.g., 'My App <name@mydomain.com>'.
  • APP_NAME: The name of the application, set to Boilerplate Next.js.
  • EMAIL_SERVER_USER: The user for the email server.
  • EMAIL_SERVER_PASSWORD: The password for the email server.
  • EMAIL_SERVER_HOST: The host for the email server, set to sandbox.smtp.mailtrap.io.
  • EMAIL_SERVER_PORT: The port for the email server, set to 587.
  • EMAIL_FROM: The default sender email address for authentication emails, set to noreply@example.com.

SendGrid​

  • SENDGRID_API_KEY: The API key for SendGrid integration.
  • SENDGRID_FROM_EMAIL: The default sender email address, e.g., 'My App <name@mydomain.com>'.

Stripe​

  • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: The public key for Stripe.
  • STRIPE_SECRET_KEY: The secret key for Stripe.
  • STRIPE_WEBHOOK_SECRET: The webhook secret for Stripe.

LemonSqueezy​

  • LEMONSQUEEZY_WEBHOOK_SECRET: The webhook secret for LemonSqueezy.
  • NEXT_PUBLIC_LEMONSQUEEZY_STORE: The public store identifier for LemonSqueezy.

Supabase​

  • NEXT_PUBLIC_SUPABASE_URL: The URL for the Supabase instance.
  • NEXT_PUBLIC_SUPABASE_ANON_KEY: The anonymous key for Supabase.
note

Environment variables related to Supabase should be filled only if using the Supabase version.

note

The NextAuth and MongoDB environment variables are not needed if NextAuth is not being used.