Routing

app/
├── page.tsx                    # /
├── layout.tsx                  # Root layout (wraps all pages)
├── (auth)/                     # Route group (no URL impact)
│   ├── login/page.tsx          # /login
│   └── register/page.tsx       # /register
├── accommodations/
│   ├── page.tsx                # /accommodations
│   └── [slug]/
│       └── page.tsx            # /accommodations/beach-villa
├── dashboard/
│   ├── layout.tsx              # Dashboard layout
│   ├── page.tsx                # /dashboard
│   ├── bookings/
│   │   ├── page.tsx            # /dashboard/bookings
│   │   └── [ref]/page.tsx      # /dashboard/bookings/Y3K-ABC123
│   └── profile/page.tsx        # /dashboard/profile
├── api/
│   ├── bookings/route.ts       # /api/bookings
│   └── webhooks/
│       └── paystack/route.ts   # /api/webhooks/paystack
└── not-found.tsx               # 404 page

// app/accommodations/page.tsx
export default function AccommodationsPage() {
  return <div>Accommodations</div>
}

// app/accommodations/[slug]/page.tsx
export default function ListingPage({ params }: { params: { slug: string } }) {
  return <div>Listing: {params.slug}</div>
}

// app/docs/[...slug]/page.tsx
// Matches /docs/a, /docs/a/b, /docs/a/b/c
export default function DocsPage({ params }: { params: { slug: string[] } }) {
  return <div>Path: {params.slug.join('/')}</div>
}

app/
├── (marketing)/          # Shared marketing layout
│   ├── layout.tsx
│   ├── about/page.tsx    # /about
│   └── pricing/page.tsx  # /pricing
├── (dashboard)/          # Shared dashboard layout
│   ├── layout.tsx
│   ├── settings/page.tsx # /settings
│   └── billing/page.tsx  # /billing

// app/api/bookings/route.ts
import { NextRequest, NextResponse } from 'next/server'
 
export async function GET(request: NextRequest) {
  const bookings = await getBookings()
  return NextResponse.json(bookings)
}
 
export async function POST(request: NextRequest) {
  const data = await request.json()
  const booking = await createBooking(data)
  return NextResponse.json(booking, { status: 201 })
}

// app/dashboard/layout.tsx
import { Sidebar } from '@/components/layout/sidebar'
 
export default function DashboardLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  )
}

// app/accommodations/loading.tsx
export default function Loading() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {[...Array(8)].map((_, i) => (
        <ListingCardSkeleton key={i} />
      ))}
    </div>
  )
}

// app/accommodations/error.tsx
"use client"
 
export default function Error({
  error,
  reset
}: {
  error: Error
  reset: () => void
}) {
  return (
    <div className="text-center py-12">
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

import Link from 'next/link'
 
<Link href="/accommodations">Browse Accommodations</Link>
 
// With dynamic segment
<Link href={`/accommodations/${listing.slug}`}>
  {listing.title}
</Link>

"use client"
 
import { useRouter } from 'next/navigation'
 
function BookingForm() {
  const router = useRouter()
 
  async function handleSubmit() {
    const booking = await createBooking(data)
    router.push(`/dashboard/bookings/${booking.reference}`)
  }
}

import { redirect } from 'next/navigation'
 
export default async function ProtectedPage() {
  const user = await getCurrentUser()
 
  if (!user) {
    redirect('/login')
  }
}

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  // Auth check
  const token = request.cookies.get('token')
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url))
    }
  }
 
  return NextResponse.next()
}
 
export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*']
}

// app/accommodations/page.tsx
export const metadata = {
  title: 'Accommodations | Y3NKO',
  description: 'Browse accommodations across Ghana'
}

// app/accommodations/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const listing = await getListing(params.slug)
 
  return {
    title: `${listing.title} | Y3NKO`,
    description: listing.description,
    openGraph: {
      images: [listing.images[0]?.url]
    }
  }
}

// app/accommodations/[slug]/page.tsx
export async function generateStaticParams() {
  const listings = await prisma.listing.findMany({
    select: { slug: true },
    where: { status: 'PUBLISHED' }
  })
 
  return listings.map((listing) => ({
    slug: listing.slug
  }))
}