DOCSEARCHbyAlgolia
Submit Docs

next-enterprise

repository·main·Indexed 27 days ago

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

A production-ready Next.js 15 boilerplate for enterprise teams. It features a pre-configured stack including Tailwind CSS v4, Radix UI, Vitest, Playwright, and OpenTelemetry. The project provides Infrastructure as Code (IaC) via Terraform for custom cloud deployments and integrates GitHub Actions for CI/CD, along with strict TypeScript and ESLint 9 configurations.

Tokens
1.8K
Snippets
4
Records
8
Agent score
93%

What's inside next-enterprise

  1. Overview of next-enterprise integrated features

    main

    The next-enterprise boilerplate includes a pre-configured stack designed for high-performance, scalable applications:

    • Core Framework: Next.js 15 (App Directory) with Strict TypeScript and ts-reset.
    • Styling: Tailwind CSS v4, Radix UI (headless components), and CVA (Class Variance Authority).
    • Package Management: pnpm managed via Corepack.
    • Testing Suite: Vitest, React Testing Library, and Playwright (including smoke and acceptance testing).
    • Quality & Linting: ESLint 9, Prettier, and Conventional Commits.
    • Observability & Monitoring: OpenTelemetry integration and Kubernetes-compatible health checks.
    • DevOps & CI/CD: GitHub Actions (with bundle size and performance tracking), Renovate BOT (automated updates), and Semantic Release (automated changelogs).
    • Developer Experience: Storybook, Bundle Analyzer, Absolute Imports, and T3 Env for environment variable management.

  2. Deploy to Custom Cloud Infrastructure via CLI

    main

    For enterprise-grade deployments on custom cloud providers like AWS, next-enterprise provides Infrastructure as Code (IaC) solutions built with Terraform. You can quickstart these deployments using a dedicated CLI.

    Detailed instructions for using the deployment CLI can be found in the official documentation at docs.blazity.com.

  3. Deploy to Vercel

    main

    You can deploy this Next.js enterprise boilerplate to Vercel with a single click. This is the fastest way to get your application live on a managed platform.

    [![Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise)

  4. Configure Playwright E2E testing

    main

    The project uses Playwright for end-to-end testing. Tests are located in the ./e2e directory. The configuration is optimized for both local development and CI environments:

    • Parallelism: Tests run in parallel (fullyParallel: true). On CI, workers are limited to 1 to prevent resource contention.
    • Retries: Tests retry up to 2 times on CI, but 0 times locally.
    • CI Safety: The build will fail on CI if test.only is present in the source code (forbidOnly).
    • Reporting: Uses the html reporter.
    • Base URL: The default baseURL for navigation (e.g., page.goto('/')) is http://127.0.0.1:3000.
    • Tracing: Traces are collected on the first retry (trace: 'on-first-retry').
    • Browser Projects: Supports chromium (Desktop Chrome), firefox (Desktop Firefox), and webkit (Desktop Safari).
    • Local Dev Server: Playwright automatically starts the local development server using pnpm dev and waits for http://127.0.0.1:3000 to be ready. On local machines, it will reuse an existing server if one is already running.
    import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
  testDir: "./e2e",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    baseURL: "http://127.0.0.1:3000",
    trace: "on-first-retry",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
  webServer: {
    command: "pnpm dev",
    url: "http://127.0.0.1:3000",
    reuseExistingServer: !process.env.CI,
  },
})

  5. Configure Prettier settings

    main

    The project uses Prettier for code formatting with the following configuration:

    • Plugins: Includes prettier-plugin-tailwindcss for automatic Tailwind CSS class sorting.
    • Trailing Commas: Set to es5 (adds trailing commas where valid in ES5).
    • Tab Width: Set to 2 spaces.
    • Print Width: Set to 120 characters.
    • Semicolons: Set to false (removes semicolons).
    module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
  trailingComma: "es5",
  tabWidth: 2,
  printWidth: 120,
  semi: false,
}

  6. Configure ESLint for Next.js Enterprise

    main

    The project uses a flat configuration for ESLint via eslint.config.mjs. It integrates TypeScript, Next.js, Storybook, and Import sorting rules.

    Key features include:

    • Automatic Directory Sorting: The import/order rule dynamically identifies directories in the project root (excluding .git, .next, .vscode, and node_modules) and treats them as internal imports.
    • Tailwind CSS Integration: Configured to recognize specific utility functions like classnames, clsx, ctl, cn, and cva.
    • Import Ordering: Enforces specific groups (external, builtin, internal, sibling, parent, index) and alphabetization.
    • TypeScript Rules: Configured to warn on unused variables that do not match the ^_ pattern.

  7. Reference: ESLint Import and TypeScript Rules

    main

    The following rules are applied in the ESLint configuration:

    • @typescript-eslint/no-unused-vars: Set to warn. Ignores variables and arguments matching the pattern ^_.
    • sort-imports: Set to error. Configured with ignoreCase: true and ignoreDeclarationSort: true.
    • import/order: Set to warn. Groups imports into external, builtin, internal, sibling, parent, and index. It includes special handling for env, theme, and public/** as internal groups.

  8. Reference: ESLint Settings and Ignored Files

    main

    The ESLint configuration defines specific settings for Tailwind CSS and module resolution, as well as a list of ignored files/directories.

    // Ignored files
const eslintIgnore = [
  ".git/",
  ".next/",
  "node_modules/",
  "dist/",
  "build/",
  "coverage/",
  "*.min.js",
  "*.config.js",
  "*.d.ts",
];

// Settings
const settings = {
  tailwindcss: {
    callees: ["classnames", "clsx", "ctl", "cn", "cva"],
  },
  "import/resolver": {
    typescript: true,
    node: true,
  },
};