Convert Figma logo to code with AI

Blazity logonext-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.

6,038
1,551
6,038
8
View on GitHub

Top Related Projects

vercel's avatar

next.js

124,777

The React Framework

t3-oss's avatar

create-t3-app

25,180

The best way to start a full-stack, typesafe Next.js app

trpc's avatar

trpc

34,688

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

shadcn-ui's avatar

ui

71,906

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

theodorusclarence's avatar

ts-nextjs-tailwind-starter

2,920

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

Quick Overview

The Blazity/next-enterprise repository is a collection of reusable components and utilities for building enterprise-grade applications with Next.js, a popular React framework for building server-rendered and static websites. The project aims to provide a solid foundation for developers to kickstart their Next.js projects with a set of pre-built, production-ready components and tools.

Pros

  • Comprehensive Component Library: The project offers a wide range of pre-built, customizable components, including layouts, forms, tables, and more, which can save developers significant time and effort in building the UI for their applications.
  • Enterprise-Grade Features: The components and utilities are designed with enterprise-level requirements in mind, such as accessibility, performance, and security.
  • Opinionated Approach: The project provides an opinionated structure and best practices for building Next.js applications, which can be particularly helpful for developers new to the framework.
  • Active Development and Community: The project is actively maintained, with regular updates and a growing community of contributors.

Cons

  • Steep Learning Curve: The project's comprehensive nature and opinionated approach may require developers to invest time in understanding the project's structure and conventions, which could be a barrier for some.
  • Potential Vendor Lock-in: By using the project's components and utilities, developers may become more dependent on the project, which could make it more difficult to migrate to alternative solutions in the future.
  • Limited Flexibility: The opinionated nature of the project may limit the flexibility for developers who prefer to build their own custom solutions or have specific requirements that deviate from the project's conventions.
  • Performance Concerns: The inclusion of a large number of components and utilities may impact the overall performance of the application, especially for smaller projects that may not require the full set of features.

Code Examples

N/A (This is not a code library)

Getting Started

N/A (This is not a code library)

Competitor Comparisons

vercel logo

next.js

124,777

The React Framework

Pros of Next.js

  • Extensive documentation and large community support
  • More flexible and customizable for various project types
  • Regular updates and maintenance from Vercel

Cons of Next.js

  • Steeper learning curve for beginners
  • Requires more configuration for advanced features
  • Less opinionated, which can lead to inconsistent project structures

Code Comparison

Next.js basic page:

export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

Next-enterprise basic page:

import { NextPage } from 'next';

const Home: NextPage = () => {
  return <h1>Welcome to Next-enterprise!</h1>
};

export default Home;

Next-enterprise provides a more structured approach with TypeScript integration by default, while Next.js offers a simpler starting point that can be expanded as needed.

Next-enterprise is built on top of Next.js, offering a pre-configured enterprise-grade boilerplate. It includes features like TypeScript, testing setup, and CI/CD configurations out of the box, making it easier to start large-scale projects. However, it may be overkill for smaller applications or those requiring unique setups.

Next.js, being the foundation, provides more flexibility but requires additional setup for enterprise-level features. It's ideal for projects of any scale and offers more freedom in terms of project structure and technology choices.

t3-oss logo

create-t3-app

25,180

The best way to start a full-stack, typesafe Next.js app

Pros of create-t3-app

  • Offers a more opinionated and streamlined setup process
  • Includes built-in TypeScript support and type safety
  • Provides a well-documented and community-driven development experience

Cons of create-t3-app

  • Less comprehensive out-of-the-box features compared to next-enterprise
  • May require additional configuration for advanced use cases
  • Limited customization options during initial setup

Code Comparison

create-t3-app:

import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";

export const exampleRouter = createTRPCRouter({
  hello: publicProcedure.query(() => {
    return { greeting: "Hello from tRPC!" };
  }),
});

next-enterprise:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Both repositories provide solid foundations for building Next.js applications, but they cater to different developer preferences and project requirements. create-t3-app focuses on type safety and a more opinionated structure, while next-enterprise offers a broader set of features and greater flexibility out of the box.

trpc logo

trpc

34,688

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

Pros of tRPC

  • Provides end-to-end typesafe APIs, enhancing developer experience and reducing runtime errors
  • Offers automatic API documentation generation, simplifying API management
  • Supports real-time subscriptions, enabling efficient live data updates

Cons of tRPC

  • Requires TypeScript knowledge, which may increase the learning curve for some developers
  • Limited to TypeScript ecosystems, potentially reducing flexibility in language choices
  • May have a steeper initial setup compared to Next Enterprise's pre-configured structure

Code Comparison

tRPC:

import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

const appRouter = t.router({
  hello: t.procedure.query(() => 'Hello, tRPC!'),
});

Next Enterprise:

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: 'Hello, Next Enterprise!' });
}

The tRPC example showcases its type-safe API creation, while Next Enterprise demonstrates a standard Next.js API route. tRPC's approach offers stronger typing and automatic client generation, whereas Next Enterprise provides a more familiar REST-like structure within the Next.js framework.

shadcn-ui logo

ui

71,906

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Pros of ui

  • Highly customizable and accessible UI components
  • Lightweight and easy to integrate into existing projects
  • Extensive documentation and examples for each component

Cons of ui

  • Requires more manual setup and configuration
  • Limited to UI components, lacking full project structure and tooling
  • May require additional styling and theming work

Code Comparison

next-enterprise:

import { Button } from '@/components/Button';

export default function Home() {
  return <Button>Click me</Button>;
}

ui:

import { Button } from "@/components/ui/button"

export default function Home() {
  return <Button variant="outline">Click me</Button>
}

Key Differences

  • next-enterprise provides a complete project boilerplate with pre-configured tools and best practices
  • ui focuses solely on reusable UI components, offering more flexibility but requiring additional setup
  • next-enterprise includes built-in features like authentication and API routes, while ui leaves these aspects to the developer
  • ui offers more customization options for individual components, allowing for greater design flexibility
  • next-enterprise provides a more opinionated structure, which can be beneficial for larger teams and projects

Both repositories have their merits, with next-enterprise offering a more comprehensive solution for enterprise-level projects, while ui provides greater flexibility and customization for UI components.

theodorusclarence logo

ts-nextjs-tailwind-starter

2,920

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

Pros of ts-nextjs-tailwind-starter

  • Simpler and more lightweight, making it easier for beginners to understand and customize
  • Includes pre-configured Absolute Imports and Module Path Aliases for improved code organization
  • Provides a clear folder structure with examples for components, hooks, and pages

Cons of ts-nextjs-tailwind-starter

  • Lacks some advanced features like internationalization and advanced testing setup
  • Does not include pre-configured CI/CD pipelines or deployment options
  • Fewer pre-built components and utilities compared to next-enterprise

Code Comparison

ts-nextjs-tailwind-starter:

import { AppProps } from 'next/app';
import '@/styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

next-enterprise:

import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { ThemeProvider } from 'next-themes';

function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute='class'>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default appWithTranslation(App);

The code comparison shows that next-enterprise includes additional features like internationalization and theme support out of the box, while ts-nextjs-tailwind-starter provides a more basic setup that can be extended as needed.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Next.js Enterprise Boilerplate
GitHub Actions Workflow Status GitHub License GitHub contributors Discord Blazity

Welcome to the Next.js Enterprise Boilerplate, an open-source template for enterprise projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! 🌍

[!NOTE] Blazity is a group of Next.js/Headless experts. Contact us at contact@blazity.com if you’d like to talk about your project or just to have a chat with us

Features

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

  • 🏎️ Next.js - Fast by default, with config optimized for performance (with App Directory)
  • 💅 Tailwind CSS - A utility-first CSS framework for rapid UI development
  • ✨ ESlint and Prettier - For clean, consistent, and error-free code
  • 🛠️ Extremely strict TypeScript - With ts-reset library for ultimate type safety
  • 🚀 GitHub Actions - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
  • 💯 Perfect Lighthouse score - Because performance matters
  • Bundle analyzer plugin - Keep an eye on your bundle size
  • Jest and React Testing Library - For rock-solid unit and integration tests
  • Playwright - Write end-to-end tests like a pro
  • Storybook - Create, test, and showcase your components
  • Smoke Testing and Acceptance Tests - For confidence in your deployments
  • Conventional commits git hook - Keep your commit history neat and tidy
  • Observability - Open Telemetry integration for seamless monitoring
  • Absolute imports - No more spaghetti imports
  • Health checks - Kubernetes-compatible for robust deployments
  • Radix UI - Headless UI components for endless customization
  • CVA - Create a consistent, reusable, and atomic design system
  • Renovate BOT - Auto-updating dependencies, so you can focus on coding
  • Patch-package - Fix external dependencies without losing your mind
  • Components coupling and cohesion graph - A tool for managing component relationships
  • Automated ChatGPT Code Reviews - Stay on the cutting edge with AI-powered code reviews!
  • Semantic Release - for automatic changelog
  • T3 Env - Manage your environment variables with ease

Table of Contents

🎯 Getting Started

To get started with this boilerplate, follow these steps:

  1. Fork & clone repository:
## Don't forget to ⭐ star and fork it first :)
git clone https://github.com/<your_username)/next-enterprise.git
  1. Install the dependencies:
yarn install --frozen-lockfile
  1. Run the development server:
yarn dev

  1. Open http://localhost:3000 with your browser to see the result.

  2. This project uses a git hook to enforce conventional commits. To install the git hook, run the following command in the root directory of the project:

brew install pre-commit
pre-commit install -t commit-msg

🚀 Deployment

Easily deploy your Next.js app with Vercel by clicking the button below:

Vercel

📃 Scripts Overview

The following scripts are available in the package.json:

  • dev: Starts the development server with colorized output
  • build: Builds the app for production
  • start: Starts the production server
  • lint: Lints the code using ESLint
  • lint:fix: Automatically fixes linting errors
  • prettier: Checks the code for proper formatting
  • prettier:fix: Automatically fixes formatting issues
  • analyze: Analyzes the bundle sizes for Client, Server and Edge environments
  • storybook: Starts the Storybook server
  • build-storybook: Builds the Storybook for deployment
  • test: Runs unit and integration tests
  • e2e:headless: Runs end-to-end tests in headless mode
  • e2e:ui: Runs end-to-end tests with UI
  • format: Formats the code with Prettier
  • postinstall: Applies patches to external dependencies
  • preinstall: Ensures the project is installed with Yarn
  • coupling-graph: Generates a coupling and cohesion graph for the components

🔗 Coupling Graph

The coupling-graph script is a useful tool that helps visualize the coupling and connections between your project's internal modules. It's built using the Madge library. To generate the graph, simply run the following command:

yarn coupling-graph

This will create a graph.svg file, which contains a graphical representation of the connections between your components. You can open the file with any SVG-compatible viewer.

graph

🧪 Testing

This boilerplate comes with various testing setups to ensure your application's reliability and robustness.

Running Tests

  • Unit and integration tests: Run Jest tests using yarn test
  • End-to-end tests (headless mode): Run Playwright tests in headless mode with yarn e2e:headless
  • End-to-end tests (UI mode): Run Playwright tests with UI using yarn e2e:ui
image

Acceptance Tests

To write acceptance tests, we leverage Storybook's play function. This allows you to interact with your components and test various user flows within Storybook.

/*
 * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
 * to learn more about using the canvasElement to query the DOM
 */
export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)

    const emailInput = canvas.getByLabelText("email", {
      selector: "input",
    })

    await userEvent.type(emailInput, "example-email@email.com", {
      delay: 100,
    })

    const passwordInput = canvas.getByLabelText("password", {
      selector: "input",
    })

    await userEvent.type(passwordInput, "ExamplePassword", {
      delay: 100,
    })
    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
    const submitButton = canvas.getByRole("button")

    await userEvent.click(submitButton)
  },
}

Smoke Testing

In this boilerplate, we use Storybook's out-of-the-box support for smoke testing to verify that components render correctly without any errors. Just run yarn test-storybook to perform smoke testing. Remember to write stories in JSX or TSX format only. Smoke testing and a lot of other functionalities dont work well with MDX stories.

🎨 Styling and Design System

This boilerplate uses Tailwind CSS for styling and CVA for creating a powerful, easy-to-use design system. If you want to learn more about the setup, check out this fantastic video by Vercel:

Styling and Design System

CVA - A New Approach to Variants

While CSS-in-TS libraries such as Stitches and Vanilla Extract are great for building type-safe UI components, they might not be the perfect fit for everyone. You may prefer more control over your stylesheets, need to use a framework like Tailwind CSS, or simply enjoy writing your own CSS.

Creating variants using traditional CSS can be a tedious task, requiring you to manually match classes to props and add types. CVA is here to take that pain away, allowing you to focus on the enjoyable aspects of UI development. By providing an easy and type-safe way to create variants, CVA simplifies the process and helps you create powerful design systems without compromising on the flexibility and control of CSS.

💾 State Management

While this boilerplate doesn't include a specific state management library, we believe it's essential for you to choose the one that best suits your project's needs. Here are some libraries we recommend for state management:

Zustand

Zustand is a small, fast, and scalable state management library. It's designed to be simple and intuitive, making it a great choice for small to medium-sized projects. It's also optimized for bundle size, ensuring minimal impact on your app's performance.

Jotai

Jotai is an atom-based state management library for React that focuses on providing a minimal and straightforward API. Its atom-based approach allows you to manage your state in a granular way while still being highly optimized for bundle size.

Recoil

Recoil is a state management library developed by Facebook, specifically designed for React applications. By utilizing atoms and selectors, Recoil allows you to efficiently manage state and derived state. Its key benefit is the ability to update components only when the state they're subscribed to changes, reducing unnecessary re-renders and keeping your application fast and efficient. Recoil also offers great developer experience with built-in debugging tools.

Choose the library that best fits your requirements and project structure to ensure an efficient state management solution for your application.

🤖 ChatGPT Code Review

We've integrated the innovative ChatGPT Code Review for AI-powered, automated code reviews. This feature provides real-time feedback on your code, helping improve code quality and catch potential issues.

To use ChatGPT Code Review, add an OPENAI_API_KEY environment variable with an appropriate key from the OpenAI platform. For setup details, refer to the Using GitHub Actions section in the documentation.

image

💻 Environment Variables handling

T3 Env is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. You’ll never again struggle with runtime errors caused by incorrect environment variable usage.

Config file is located at env.mjs. Simply set your client and server variables and import env from any file in your project.

export const env = createEnv({
  server: {
    // Server variables
    SECRET_KEY: z.string(),
  },
  client: {
    // Client variables
    API_URL: z.string().url(),
  },
  runtimeEnv: {
    // Assign runtime variables
    SECRET_KEY: process.env.SECRET_KEY,
    API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
})

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

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

🤝 Contribution

Contributions are always welcome! To contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch with a descriptive name.
  3. Make your changes, and commit them using the Conventional Commits format.
  4. Push your changes to the forked repository.
  5. Create a pull request, and we'll review your changes.

Support

If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.


Blazity Discord Banner

📜 License

This project is licensed under the MIT License. For more information, see the LICENSE file.

Contributors

Bart Stefanski
Bart Stefanski
💻		 Jakub Jabłoński
Jakub Jabłoński
🚇		 Igor Klepacki
Igor Klepacki
📖
Add your contributions