# How to Configure Next.js 16 for the AI Website Cloner Template

> Configure Next.js 16 for the AI Website Cloner Template by editing next.config.ts, tsconfig.json, and src/app/layout.tsx for optimal performance and customization.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-04

---

**To configure Next.js 16 for the ai-website-cloner-template, edit [`next.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts) to set `output: "standalone"`, ensure [`tsconfig.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tsconfig.json) maintains strict TypeScript checking, and customize [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) for global fonts and metadata.**

The AI Website Cloner Template by JCodesMore provides a minimal, production-ready Next.js 16 foundation built for the App Router architecture. When you configure Next.js 16 for the ai-website-cloner-template, you primarily work with three critical files that control the build output, TypeScript compiler behavior, and root HTML structure.

## Core Next.js Settings in next.config.ts

The entry point for Next.js configuration is [`next.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts) at the repository root. According to the JCodesMore/ai-website-cloner-template source code, the base configuration is intentionally minimal:

```typescript
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
};

export default nextConfig;

```

The **`output: "standalone"`** option generates a self-contained `.next/standalone` directory that runs without installing `node_modules`, making it ideal for Docker or Vercel deployments.

You can extend this configuration safely with additional options:

- **`reactStrictMode: true`** – Enables React's strict mode for highlighting potential problems
- **`publicRuntimeConfig`** – Exposes environment variables to the client side
- **`serverRuntimeConfig`** – Keeps variables server-only
- **`rewrites`** – Proxy API calls or handle legacy URL patterns

For example, adding a rewrite rule to proxy blog requests:

```typescript
const nextConfig: NextConfig = {
  output: "standalone",
  async rewrites() {
    return [
      {
        source: "/blog/:slug*",
        destination: "/api/blog-proxy/:slug*",
      },
    ];
  },
};

```

## TypeScript Compiler Configuration (tsconfig.json)

The template enforces strict TypeScript checking to ensure generated code type-safety. The [`tsconfig.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tsconfig.json) in the repository root contains:

```json
{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

```

Key settings to maintain:

- **`strict: true`** – Essential for type-checking cloned website code
- **`paths`** – Maps `@/*` to `src/*` for clean imports
- **`noEmit: true`** – Delegates compilation to Next.js; do not remove unless running `tsc` separately
- **`moduleResolution: "bundler"``** – Required for modern package compatibility

Add custom path aliases by extending the `"paths"` object, such as `"@components/*": ["src/components/*"]`.

## Root Layout and Global Fonts (src/app/layout.tsx)

The root layout in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) controls the top-level HTML structure, metadata, and global font injection. The template uses **Geist** and **Geist_Mono** from `next/font/google`:

```tsx
// src/app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Website Clone",
  description: "Pixel-perfect website clone",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}

```

Customize the layout by:

1. Adding additional Google Fonts following the same `next/font/google` import pattern
2. Editing [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) to modify the global CSS reset or Tailwind base layers
3. Extending the `className` on `<html>` or `<body>` to inject theme classes like `dark` or `light`

## Tailwind Class Merging Utility (src/lib/utils.ts)

The template includes a `cn` helper in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) for safe Tailwind class merging:

```typescript
// src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

```

Use this utility whenever applying conditional Tailwind classes to avoid style conflicts:

```tsx
<button className={cn("px-4 py-2", isActive && "bg-primary")}>
  Click me
</button>

```

## Optional Tailwind Configuration

While the template relies on the built-in Tailwind 4 integration via PostCSS, you can create a custom [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) at the repository root to extend design tokens:

```typescript
// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  darkMode: "class",
  content: ["./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: "oklch(70% 0.15 210)",
      },
    },
  },
} satisfies Config;

```

After creating this file, restart the development server with `npm run dev` to apply changes.

## Running the Development Server

With configuration files in place, start the development environment:

```bash

# Install dependencies

npm install

# Start development server (hot-reloads next.config.ts changes)

npm run dev

# Create production build (generates .next/standalone per config)

npm run build

```

The repository includes a [`docker-compose.yml`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docker-compose.yml) that leverages the standalone output for containerized deployments.

## Summary

- Configure **[`next.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts)** with `output: "standalone"` for portable, self-contained builds suitable for Docker or Vercel
- Maintain **`strict: true`** in [`tsconfig.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tsconfig.json) to ensure type safety for generated code, and use the `"@/*"` path alias for imports
- Customize **[`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx)** to inject Google Fonts, modify metadata, and apply global CSS classes to the HTML document
- Utilize the **`cn()` utility** from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) for conflict-free Tailwind class merging
- Optionally create **[`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts)** to extend theme colors or enable dark mode

## Frequently Asked Questions

### How do I enable standalone output mode for Docker deployments?

Set `output: "standalone"` in your [`next.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts) file. This setting generates a `.next/standalone` directory containing only the necessary files to run your application without the full `node_modules` folder, significantly reducing container image size.

### Can I add custom TypeScript path aliases for cleaner imports?

Yes. Add entries to the `paths` object in [`tsconfig.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tsconfig.json). The template already maps `@/*` to `src/*`, but you can extend this with additional aliases like `@components/*` pointing to `src/components/*` for simplified import statements.

### How do I inject additional Google Fonts into the root layout?

Import new fonts from `next/font/google` in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) following the same pattern as the default `Geist` imports. Create font variables with descriptive names, then append them to the `className` prop on the `<html>` element alongside existing font variables.

### Where should I define runtime environment variables?

Use `publicRuntimeConfig` or `serverRuntimeConfig` in [`next.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/next.config.ts) for complex runtime configuration, or simply prefix environment variables with `NEXT_PUBLIC_` for automatic client-side exposure. The minimal base configuration accepts any standard Next.js option without breaking the website cloning workflow.