The base | Codelesskit

Codelesskit generates a clean, typed architecture following Next.js best practices.

Overview

The generated app follows Next.js best practices with a clear separation of concerns.

App router for routing
Server and client components
Type-safe database queries
Modular architecture

Base Installation

When you run codelesskit init, you get a base Next.js project with:

Next.js with App Router configured
Tailwind CSS for styling
shadcn/ui components (button, input, card, dialog, dropdown-menu, label, select, separator, skeleton, sonner, table, tabs, textarea, avatar, alert, badge, field)
i18n support with next-intl for translations
Theme provider for dark/light mode
Utility functions and constants

Folder Structure

Here's what gets installed with the base project:

layout.tsx

page.tsx

theme-provider.tsx

alert.tsx

avatar.tsx

badge.tsx

button.tsx

card.tsx

dialog.tsx

dropdown-menu.tsx

field.tsx

input.tsx

label.tsx

select.tsx

separator.tsx

skeleton.tsx

sonner.tsx

table.tsx

tabs.tsx

textarea.tsx

utils.ts

constants.ts

request.ts

routing.ts

en.json

es.json

fr.json

next.config.ts

tailwind.config.ts

tsconfig.json

package.json

app/layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "./theme-provider";
import { NextIntlClientProvider } from "next-intl";
import { getMessages, getTranslations } from "next-intl/server";
import { Toaster } from "@/components/ui/sonner";
const inter = Inter({ subsets: ["latin"] });
// SEO: Generate metadata for each page using i18n translations
// This ensures proper SEO with localized titles and descriptions
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "homePage" });
  return {
    title: t("title"),
    description: t("description"),
  };
}
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // i18n: Load messages for the current locale
  // Messages are loaded server-side and passed to NextIntlClientProvider
  // This enables server-side rendering with proper translations
  const messages = await getMessages();
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        {/* i18n: NextIntlClientProvider makes translations available to all client components */}
        <NextIntlClientProvider messages={messages}>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
            {/* Toast notifications for user feedback */}
            <Toaster />
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Project structure

Each module is self-contained and can be added or removed independently. The generated code is plain TypeScript/React with no hidden abstractions.

After the base installation, you can add modules like authentication, database, emails, and payments as needed. Each module is independent and can be added or removed at any time.