Architecture | Tailar

Tailar 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

Core stack

When you run tailar init, every template shares the same 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.

During the setup wizard you choose which modules to include; you can also run tailar add later. Each module is independent and can be added or removed at any time.