https://github.com/devaungphyo/next-enterprise

💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.
https://github.com/devaungphyo/next-enterprise

Last synced: about 1 month ago
JSON representation

💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.

• Host: GitHub
• URL: https://github.com/devaungphyo/next-enterprise
• Owner: devaungphyo
• Created: 2024-06-02T02:47:36.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T03:10:17.000Z (5 months ago)
• Last Synced: 2024-10-27T13:41:55.303Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 204 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js Enterprise Boilerplate 

## Features

With this template, you get all the awesomeness you need:

- 🏎️ **[Next.js](https://nextjs.org/)** - Fast by default, with config optimized for performance (with **App Directory**)

- 💅 **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development

- ✨ **[ESlint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code

- 🛠️ **[Extremely strict TypeScript](https://www.typescriptlang.org/)** - With [`ts-reset`](https://github.com/total-typescript/ts-reset) library for ultimate type safety

- 🚀 **[GitHub Actions](https://github.com/features/actions)** - Pre-configured actions for smooth workflows, including Bundle Size and performance stats

- 💯 **Perfect Lighthouse score** - Because performance matters

- **[Bundle analyzer plugin](https://www.npmjs.com/package/@next/bundle-analyzer)** - Keep an eye on your bundle size

- **[Vitest](https://vitest.dev/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests

- **Smoke Testing** and **Acceptance Tests** - For confidence in your deployments

- **[Conventional commits git hook](https://www.conventionalcommits.org/)** - Keep your commit history neat and tidy

- **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports

- **[Health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/)** - Kubernetes-compatible for robust deployments

- **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization

- **[CVA](http://cva.style/)** - Create a consistent, reusable, and atomic design system

- **[Renovate BOT](https://www.whitesourcesoftware.com/free-developer-tools/renovate)** - Auto-updating dependencies, so you can focus on coding

- **[Next Auth](https://authjs.dev)** - Authentication and Authorization System

## Table of Contents

- [Next.js Enterprise Boilerplate](#nextjs-enterprise-boilerplate)

    - [Features](#features)

    - [Table of Contents](#table-of-contents)

    - [Getting Started](#-getting-started)

    - [Deployment](#-deployment)

    - [Scripts Overview](#-scripts-overview)

    - [Testing](#-testing)

        - [Running Tests](#running-tests)

    - [Styling and Design System](#-styling-and-design-system)

        - [CVA - A New Approach to Variants](#cva---a-new-approach-to-variants)

    - [State Management](#-state-management)

        - [Zustand](#zustand)

        - [Jotai](#jotai)

        - [Recoil](#recoil)

    - [Environment Variables handling](#-environment-variables-handling)

## 🎯 Getting Started

To get started with this boilerplate, follow these steps:

1. Fork & clone repository:

```bash

## Don't forget to ⭐ star and fork it first :)

git clone https://github.com/ {

  const { error, data } = envSchema.safeParse(process.env);

  if (error) throw new Error('Invalid environment variable');

  return data;

};

export default env;

```

If the required environment variables are not set, you'll get an error message:

```sh

  ❌ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }

```

### Authentication Setup

- Credentials Login with Next Auth v5

- Custom Session, User and Jwt type for next-auth

`types.d.ts`

```ts

import 'next-auth';

type Role = 'User' | 'Admin' | 'SuperAdmin';

declare module 'next-auth' {

  /**

   * The shape of the user object returned in the OAuth providers' `profile` callback,

   * or the second parameter of the `session` callback, when using a database.

   */

  interface User {

    id: string;

    name: string;

    role: Role;

    phone: string;

    createdAt: Date;

    updatedAt: Date;

    dateOfBirth?: Date | null;

    address?: string | null;

    jwt: string;

  }

  /**

   * Returned by `useSession`, `auth`, contains information about the active session.

   */

  interface Session {

    user: User;

  }

}

// The `JWT` interface can be found in the `next-auth/jwt` submodule

declare module '@auth/core/jwt' {

  /** Returned by the `jwt` callback and `auth`, when using JWT sessions */

  interface JWT {

    id: string;

    name: string;

    role: Role;

    phone: string;

    createdAt: Date;

    updatedAt: Date;

    dateOfBirth?: Date | null;

    address?: string | null;

    jwt: string;

  }

}

```

### Type safe data fetching with zod

```ts

const safeFetch = async (

  schema: T,

  url: URL | RequestInfo,

  init?: RequestInit,

): Promise>> => {

  try {

    const fullUrl = `${env.NEXT_PUBLIC_API_URL}${url}`;

    const jsonData = await fetchJson(fullUrl, init);

    const { data, error } = validateSchema(schema, jsonData);

    if (error) {

      return { error, data: null };

    }

    return { data, error: null };

  } catch (error) {

    return { error, data: null };

  }

};

```