Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 days 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 (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T03:10:17.000Z (4 months ago)
- Last Synced: 2024-10-27T13:41:55.303Z (18 days 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 };
}
};
```