DocsFrameworksNext.js

Next.js Adapter

Use Lunx for frontend tooling alongside a Next.js application. Accelerate component builds, run security audits, and use the Lunx plugin ecosystem within the Next.js ecosystem.

Next.js 14+ · App Router · RSC

Complementary usage

Lunx works alongside Next.js rather than replacing it. Use Lunx for pre-build security auditing, shared component library compilation, and the plugin ecosystem. Next.js manages its own webpack/Turbopack pipeline for the application itself.

Setup

bash

# Add Lunx to an existing Next.js project
npm install --save-dev lunx-dev

typescriptlunx.config.ts

import { defineConfig } from 'lunx'

export default defineConfig({
  framework: 'react',   // Lunx builds the component library

  // Build a shared component library consumed by Next.js
  build: {
    lib: {
      entry:   'src/components/index.ts',
      formats: ['es', 'cjs'],
      fileName: 'index',
    },
    outDir: 'lib/dist',
  },

  // Run security audit before Next.js builds
  security: {
    scanSecrets: true,
    checkCVEs:   true,
    failOnSeverity: 'high',
  },
})

Pre-build security gate

jsonpackage.json

{
  "scripts": {
    "dev":     "next dev",
    "build":   "lunx security audit && next build",
    "preview": "next start"
  }
}

Server Components (App Router)

typescriptapp/blog/page.tsx

// React Server Component — runs on the server, zero client JS
import { db } from '@/lib/db'

export default async function BlogPage() {
  // Direct DB access — no API layer needed
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-4xl font-bold mb-8">Blog</h1>
      <ul className="space-y-4">
        {posts.map(post => (
          <li key={post.id}>
            <a href={`/blog/${post.slug}`} className="text-blue-500 hover:underline">
              {post.title}
            </a>
            <p className="text-gray-500 text-sm mt-1">{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

PreviousWaku Adapter NextAnalog Adapter