Next.js SaaS Boilerplate

This is a Next.js SaaS boilerplate project using Tailwind CSS, NextUI Pro, DaisyUI, Zustand for state management, React Query, and other essential tools and libraries. This setup provides a robust foundation for building modern, responsive, and high-performance SaaS applications.

Table of Contents

• Features
• Installation
• Project Structure
• Usage
• Configuration
• State Management
• API Integration
• Contributing
• License

Features

• Next.js: A React framework for building server-side rendering and static web applications.
• Tailwind CSS: A utility-first CSS framework for styling.
• NextUI Pro: A React UI library that provides modern and beautiful UI components.
• DaisyUI: Tailwind CSS components plugin that adds extra UI components.
• Zustand: A small, fast, and scalable state management solution.
• React Query: Data fetching and synchronization library for React.
• TypeScript: Optional support for TypeScript.
• ESLint & Prettier: Code quality tools to ensure code consistency and readability.
• Jest & React Testing Library: Testing setup for unit and integration tests.
• SEO Optimization: Built-in SEO support for better search engine visibility.

Installation

To get started with this boilerplate, follow the steps below:

Prerequisites

• Node.js (>= 14.x)
• npm (>= 7.x) or yarn (>= 1.x)

Clone the Repository

git clone https://github.com/your-username/nextjs-saas-boilerplate.git
cd nextjs-saas-boilerplate

Install Dependencies

Using npm:

npm install

Or using yarn:

yarn install

Usage

Development

To start the development server, run:

npm run dev

Or using yarn:

yarn dev

Build

To create an optimized production build, run:

npm run build

Or using yarn:

yarn build

Start

To start the production server after building, run:

npm run start

Or using yarn:

yarn start

Configuration

Tailwind CSS

Tailwind CSS is configured in tailwind.config.js. You can extend the theme, add plugins, and configure other Tailwind settings there.

NextUI Pro

NextUI components are available out-of-the-box. Wrap your application with NextUIProvider in pages/_app.js or pages/_app.tsx.

DaisyUI

DaisyUI components are automatically available, with themes configured in tailwind.config.js.

State Management

Zustand is used for state management. The global store is set up in the src/store directory. You can create new slices or extend the existing ones as needed.

Example Usage

import useStore from '@/store';

const ExampleComponent = () => {
  const { stateValue, setStateValue } = useStore((state) => ({
    stateValue: state.stateValue,
    setStateValue: state.setStateValue,
  }));

  return (
    <div>
      <p>{stateValue}</p>
      <button onClick={() => setStateValue('new value')}>Update Value</button>
    </div>
  );
};

API Integration

React Query is used for data fetching and caching. API requests are organized in the src/api directory.

Example Usage

import { useQuery } from 'react-query';
import { fetchData } from '@/api/example';

const ExampleComponent = () => {
  const { data, error, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Data: {data}</div>;
};

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

This project is licensed under the MIT License. See the LICENSE file for more details.