Next.js Design System Integration

Full support for Next.js 13+ App Router, server components, and CSS Modules. Detect drift across your entire Next.js application.

Get started free

Next.js-Specific Features

App Router Support

Full support for Next.js 13+ App Router including layouts, pages, and server components.

Server Components

Distinguishes between server and client components for accurate drift detection.

CSS Modules

Scans .module.css files and validates against your design tokens.

Tailwind Integration

Works with Next.js + Tailwind setups, detecting arbitrary values and custom classes.

Image Component

Validates next/image usage for consistent styling across the app.

Route Groups

Respects route group boundaries for scoped drift analysis.

See it in action

buoy-cli
$
Scanning Next.js project...
Found 45 pages/routes
Found 92 components
Found 23 server components
WARNING 28 hardcoded values detected
WARNING 6 CSS module inconsistencies
INFO 9 Tailwind arbitrary values

Configuration Example

buoy.config.mjs
// buoy.config.mjs
export default {
  framework: 'nextjs',

  include: [
    'app/**/*.tsx',
    'components/**/*.tsx',
  ],

  // Next.js-specific options
  nextjs: {
    appRouter: true,
    serverComponents: true,
  },

  // Tailwind config path
  tailwind: './tailwind.config.ts',

  tokens: './src/tokens',
}

Other Integrations

Ready to catch design drift?

Free. Open source. No signup required.