Skip to content

Getting Started#

Create Project#

npx create-next-app@latest my-app \
  --typescript \
  --app \
  --tailwind \
  --eslint \
  --src-dir false \
  --import-alias "@/*"

Install Dependencies#

npm install better-auth zod react-hook-form @hookform/resolvers clsx tailwind-merge class-variance-authority

Root Layout#

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My App",
  description: "Built with Next.js",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

Project Structure#

my-app/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── signup/
│   ├── (protected)/
│   │   ├── dashboard/
│   │   └── layout.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   └── shared/
├── lib/
│   ├── auth.ts
│   └── utils.ts
└── public/

Utility Functions#

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Scripts#

npm run dev     # Start development server
npm run build   # Build for production
npm run start   # Start production server