Master nested layouts and route organization in Next.js App Router with Google Antigravity for scalable applications
# Next.js App Router Layout Patterns for Google Antigravity
The App Router introduces powerful layout patterns that enable code sharing, performance optimization, and better user experiences. This guide establishes patterns for structuring Next.js applications with Google Antigravity, enabling Gemini 3 to generate well-organized, scalable route architectures.
## Root Layout Structure
Configure the root layout with essential providers:
```typescript
// app/layout.tsx
import { Inter } from "next/font/google";
import { Providers } from "./providers";
import { Analytics } from "@/components/Analytics";
import { Toaster } from "@/components/ui/toaster";
import "./globals.css";
const inter = Inter({
subsets: ["latin"],
variable: "--font-sans",
display: "swap",
});
export const metadata = {
title: {
template: "%s | MyApp",
default: "MyApp - Build Something Amazing",
},
description: "Your application description",
metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL!),
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.variable} font-sans antialiased`}>
<Providers>
{children}
<Toaster />
<Analytics />
</Providers>
</body>
</html>
);
}
```
## Route Group Layouts
Organize routes with shared layouts using route groups:
```typescript
// app/(marketing)/layout.tsx
import { MarketingHeader } from "@/components/marketing/Header";
import { MarketingFooter } from "@/components/marketing/Footer";
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen flex-col">
<MarketingHeader />
<main className="flex-1">{children}</main>
<MarketingFooter />
</div>
);
}
// app/(dashboard)/layout.tsx
import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth";
import { DashboardSidebar } from "@/components/dashboard/Sidebar";
import { DashboardHeader } from "@/components/dashboard/Header";
export default async function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
const session = await getSession();
if (!session) redirect("/login");
return (
<div className="flex h-screen">
<DashboardSidebar user={session.user} />
<div className="flex flex-1 flex-col overflow-hidden">
<DashboardHeader user={session.user} />
<main className="flex-1 overflow-y-auto p-6">{children}</main>
</div>
</div>
);
}
```
## Parallel Routes
Implement complex UI patterns with parallel routes:
```typescript
// app/dashboard/@analytics/page.tsx
import { Suspense } from "react";
import { AnalyticsDashboard } from "@/components/analytics/Dashboard";
import { AnalyticsSkeleton } from "@/components/analytics/Skeleton";
export default function AnalyticsSlot() {
return (
<Suspense fallback={<AnalyticsSkeleton />}>
<AnalyticsDashboard />
</Suspense>
);
}
// app/dashboard/@notifications/page.tsx
import { NotificationPanel } from "@/components/notifications/Panel";
export default function NotificationsSlot() {
return <NotificationPanel />;
}
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
analytics,
notifications,
}: {
children: React.ReactNode;
analytics: React.ReactNode;
notifications: React.ReactNode;
}) {
return (
<div className="grid grid-cols-12 gap-6">
<div className="col-span-8">{children}</div>
<div className="col-span-4 space-y-6">
{analytics}
{notifications}
</div>
</div>
);
}
```
## Intercepting Routes
Create modal patterns with route interception:
```typescript
// app/@modal/(.)photos/[id]/page.tsx
import { Modal } from "@/components/ui/Modal";
import { PhotoViewer } from "@/components/photos/Viewer";
export default function PhotoModal({
params,
}: {
params: { id: string };
}) {
return (
<Modal>
<PhotoViewer photoId={params.id} />
</Modal>
);
}
// app/photos/[id]/page.tsx (full page fallback)
import { PhotoViewer } from "@/components/photos/Viewer";
import { PhotoDetails } from "@/components/photos/Details";
export default function PhotoPage({
params,
}: {
params: { id: string };
}) {
return (
<div className="container mx-auto py-8">
<PhotoViewer photoId={params.id} />
<PhotoDetails photoId={params.id} />
</div>
);
}
// app/layout.tsx (include modal slot)
export default function RootLayout({
children,
modal,
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
{modal}
</body>
</html>
);
}
```
## Best Practices
1. **Route groups**: Use parentheses for organization without URL impact
2. **Parallel routes**: Load independent UI sections simultaneously
3. **Intercepting routes**: Enable modal patterns with shareable URLs
4. **Loading UI**: Provide immediate feedback with loading.tsx
5. **Error boundaries**: Handle errors gracefully with error.tsxThis Next.js prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their next.js implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Next.js projects, consider mentioning your framework version, coding style, and any specific libraries you're using.