IXULABS Next.js Boilerplate

A modern, full-featured Next.js boilerplate application with GraphQL integration, Apollo Client, Redux state management, and a comprehensive component library.

🚀 Features

• Next.js 12 - React framework with file-based routing
• GraphQL - Apollo Client for data fetching with WebSocket support
• State Management - Redux with Redux Persist for client-side caching
• Authentication - Built-in auth system with multiple layout types
• Component Architecture - Atomic design pattern (Atoms, Molecules, Organisms)
• Styling - Emotion CSS-in-JS with Material-UI components
• TypeScript - Full type safety and IDE support
• Responsive Design - Mobile-first approach with custom fonts
• MDX Support - Markdown with JSX components
• Rich Text Editing - Tiptap editor integration
• PDF Generation - React PDF for document rendering
• Payment Integration - Stripe integration for payments
• Real-time Updates - WebSocket support for subscriptions
• Internationalization - next-translate for multi-language support
• Development Tools - ESLint, Prettier, and pre-commit hooks

📋 Prerequisites

• Node.js 14+
• npm or yarn package manager
• GraphQL API endpoints (configured via environment variables)

🛠 Installation

1. Clone the repository

git clone <repository-url>
cd templates/public

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

Create a .env.local file in the root directory with the following variables:

GRAPHQL_SERVER_URL=https://api.example.com/graphql
GRAPHQL_CHAT_URL=https://api.example.com/chat
GRAPHQL_URL_WS=wss://api.example.com/graphql
PROJECT_ID=your_project_id
SITE=your_site_name
APP_ENV=development
URL_INVITED=https://example.com/invited
URL_REDIRECT_INVITED=https://example.com/redirect

📦 Project Structure

src/
├── @types/              # TypeScript type definitions
├── apollo/              # GraphQL queries, mutations, and configurations
│   ├── query/          # Apollo query definitions
│   ├── mutation/       # Apollo mutation definitions
│   └── subscription/   # Real-time subscriptions
├── auth/               # Authentication layouts (DASHBOARD, LOGIN, LANDING, etc.)
├── components/         # React components
│   ├── @atoms/        # Smallest reusable components
│   ├── @molecules/    # Medium-sized composite components
│   ├── @organisms/    # Large complex components
│   ├── footer/
│   ├── sidebar/
│   └── templates/     # Page templates
├── config/            # Configuration files
├── hooks/             # Custom React hooks
├── jotai/             # State management with Jotai
├── layout/            # Layout wrappers for different page types
├── pages/             # Next.js pages and routes
├── redux/             # Redux store, actions, and reducers
├── styles/            # Global styles and theming
├── utils/             # Utility functions
└── assets/            # Static assets and constants

🚀 Development

Start Development Server

npm run dev

The application will be available at http://localhost:3000

Build for Production

npm run build

Start Production Server

npm start

Code Quality

Lint files:

npm run lint

Fix linting issues and format code:

npm run format

🏗 Architecture

Component Structure (Atomic Design)

• Atoms - Basic building blocks (buttons, inputs, badges)
• Molecules - Simple component compositions
• Organisms - Complex component groups (header, footer, sidebar)
• Templates - Page layouts combining organisms

State Management

• Redux - Application-wide state for complex data
• Jotai - Lightweight atom-based state management
• Apollo Client - GraphQL caching and data fetching

Authentication

The app supports multiple authentication layouts:

• DASHBOARD - Authenticated user dashboard
• LOGIN - Login page layout
• LANDING - Public landing page
• PUBLIC - Public pages
• DEFAULT - Default fallback layout

📡 GraphQL Integration

Apollo Client Setup

Apollo Client is configured for:

• HTTP requests to GraphQL API
• WebSocket subscriptions for real-time updates
• Automatic caching and synchronization

Example Query Usage

import { useQuery } from '@apollo/client';
import { GET_USER_PROFILE } from '@Apollo/query/profile';

export function UserProfile() {
  const { data, loading, error } = useQuery(GET_USER_PROFILE);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return <div>{data.user.name}</div>;
}

Example Mutation Usage

import { useMutation } from '@apollo/client';
import { LOGIN_MUTATION } from '@Apollo/mutation/login';

export function LoginForm() {
  const [login, { loading }] = useMutation(LOGIN_MUTATION);
  
  const handleSubmit = async (email, password) => {
    const result = await login({ variables: { email, password } });
    // Handle result
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
}

🎨 Styling

The project uses Emotion CSS-in-JS with Material-UI components:

import styled from '@emotion/styled';
import { Button } from '@material-ui/core';

const StyledButton = styled(Button)`
  background-color: #007bff;
  
  &:hover {
    background-color: #0056b3;
  }
`;

🌍 Internationalization

Using next-translate for multi-language support:

import useTranslation from 'next-translate/useTranslation';

export function MyComponent() {
  const { t } = useTranslation();
  
  return <h1>{t('common:title')}</h1>;
}

💳 Payment Integration

Stripe integration is available for payment processing:

import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY);

export function CheckoutPage() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
}

📝 Available Scripts

| Script | Purpose | |--------|---------| | npm run dev | Start development server | | npm run build | Build for production | | npm start | Start production server | | npm run lint | Run ESLint | | npm run format | Format code with Prettier | | npm run ul | Update UI library |

🔒 Environment Variables

Required environment variables for production:

GRAPHQL_SERVER_URL        # Main GraphQL API endpoint
GRAPHQL_CHAT_URL          # Chat service GraphQL endpoint
GRAPHQL_URL_WS            # WebSocket GraphQL endpoint
PROJECT_ID                # Application project ID
SITE                      # Site identifier
APP_ENV                   # Environment (development/production)
URL_INVITED               # Invited users redirect URL
URL_REDIRECT_INVITED      # Additional redirect URL

🤝 Contributing

1. Create a feature branch
2. Make your changes
3. Run npm run format to format code
4. Run npm run lint to check for issues
5. Commit and push to create a pull request

📄 License

ISC

👨‍💻 Support

For issues and questions, please refer to the documentation or contact the development team.

Last Updated: January 2026
Project Name: boilerplate-next-ixulabs
Version: 1.0.0