Next-genkit NPM

Next-GenKit 🚀

A powerful CLI tool for generating Next.js app router pages and API routes with ease.

🌟 Features

📄 Generate Next.js pages with modern layouts
🔌 Create API routes with pre-configured handlers
🎯 TypeScript and JavaScript support
🎨 Tailwind CSS integration
💻 Interactive CLI experience
⚡ Lightning fast setup
🎭 Clean and consistent code generation

🚀 Installation & Usage

Using npx (Recommended - No Installation Required)

npx next-genkit generate

You'll be prompted to:

Choose your preferred language (TypeScript/JavaScript)
Select what to generate (Page/API Route)
Enter the route path
Configure Tailwind CSS (for pages)

📝 Examples

Creating a New Page

$ next-genkit generate
? Which language are you using? TypeScript
? What would you like to generate? Page
? Enter the route path: blog/[slug]
? Are you using Tailwind CSS? Yes

✨ Created page at: app/blog/[slug]/page.tsx

Creating an API Route

$ next-genkit generate
? Which language are you using? TypeScript
? What would you like to generate? API Route
? Enter the route path: api/users

✨ Created API route at: app/api/users/route.ts

📦 Generated Files

Page Template

export default function Page() {
  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center">
          <h1 className="text-4xl font-bold tracking-tight text-gray-900">
            New Page
          </h1>
          <p className="mt-4 text-lg text-gray-500">
            Edit this page in app/page.tsx
          </p>
        </div>
      </div>
    </div>
  );
}

API Route Template

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello from the API" });
}

export async function POST(request: Request) {
  const data = await request.json();
  return NextResponse.json({ message: "Success", data });
}