# Enable Turbopack for development
next dev --turbo

# Performance improvements
# - Up to 95% faster local server startup
# - Up to 68% faster code updates
# - Significant memory usage reduction

// Server Components with Actions
async function addToCart(formData: FormData) {
  'use server';

  const productId = formData.get('productId');
  const quantity = formData.get('quantity');

  await db.cart.add({ productId, quantity });
  revalidatePath('/cart');
}

export default function ProductPage({ product }) {
  return (
    <form action={addToCart}>
      <input type="hidden" name="productId" value={product.id} />
      <input type="number" name="quantity" defaultValue={1} min={1} />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

// app/products/[id]/page.tsx

// Static by default - cached at build time
export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return <ProductView product={product} />;
}

// Dynamic data fetching with cache control
async function getProduct(id: string) {
  const res = await fetch(https://api.example.com/products/${id}, {
    next: {
      revalidate: 3600, // Revalidate every hour
      tags: ['products', product-${id}],
    },
  });
  return res.json();
}

// On-demand revalidation
// app/api/revalidate/route.ts
export async function POST(request: Request) {
  const { tag } = await request.json();
  revalidateTag(tag);
  return Response.json({ revalidated: true, now: Date.now() });
}

apps/
├── web/              # Main web application
├── admin/            # Admin dashboard
└── docs/             # Documentation site
packages/
├── ui/               # Shared UI components
├── config/           # Shared configurations
├── database/         # Database client and schemas
└── utils/            # Shared utilities

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["*/.env.local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/", "!.next/cache/"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {}
  }
}

src/
├── app/                    # Next.js app router
├── features/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignupForm.tsx
│   │   ├── actions/
│   │   │   └── auth.ts
│   │   ├── hooks/
│   │   │   └── useAuth.ts
│   │   └── types.ts
│   ├── products/
│   │   ├── components/
│   │   ├── actions/
│   │   └── hooks/
│   └── checkout/
├── shared/
│   ├── components/         # Shared UI components
│   ├── hooks/             # Shared hooks
│   └── utils/             # Utility functions
└── lib/                   # External integrations

// lib/auth.ts
import NextAuth from 'next-auth';
import { DrizzleAdapter } from '@auth/drizzle-adapter';
import { db } from '@/lib/database';
import Credentials from 'next-auth/providers/credentials';
import Google from 'next-auth/providers/google';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: DrizzleAdapter(db),
  session: { strategy: 'jwt' },
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    Credentials({
      credentials: {
        email: { type: 'email' },
        password: { type: 'password' },
      },
      async authorize(credentials) {
        const user = await db.query.users.findFirst({
          where: eq(users.email, credentials.email),
        });

        if (!user || !verifyPassword(credentials.password, user.password)) {
          return null;
        }

        return { id: user.id, email: user.email, role: user.role };
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role;
      }
      return token;
    },
    async session({ session, token }) {
      session.user.role = token.role;
      return session;
    },
  },
});

// middleware.ts
import { auth } from '@/lib/auth';

export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isAdminRoute = req.nextUrl.pathname.startsWith('/admin');
  const isApiRoute = req.nextUrl.pathname.startsWith('/api');

  // API routes handle their own auth
  if (isApiRoute) return;

  // Redirect unauthenticated users
  if (!isLoggedIn && isAdminRoute) {
    return Response.redirect(new URL('/login', req.nextUrl));
  }

  // Check admin role for admin routes
  if (isAdminRoute && req.auth?.user?.role !== 'admin') {
    return Response.redirect(new URL('/unauthorized', req.nextUrl));
  }
});

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).)'],

};

import { Suspense } from 'react';

export default async function Page() {
  const user = await getUser(); // Fast, required for layout

  return (
    <Layout user={user}>
      <Suspense fallback={<StatsSkeleton />}>
        <Stats /> {/ Can load independently /}
      </Suspense>

      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart /> {/ Heavy component /}
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders /> {/ Database query */}
      </Suspense>
    </Layout>
  );
}

import Image from 'next/image';

export function ProductImage({ product }) {
  return (
    <Image
      src={product.image}
      alt={product.title}
      width={800}
      height={600}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      placeholder="blur"
      blurDataURL={product.blurDataUrl}
      priority={product.featured}
    />
  );
}

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { NodeSDK } = await import('@opentelemetry/sdk-node');
    const { getNodeAutoInstrumentations } = await import(
      '@opentelemetry/auto-instrumentations-node'
    );

    const sdk = new NodeSDK({
      serviceName: 'my-next-app',
      instrumentations: [getNodeAutoInstrumentations()],
    });

    sdk.start();
  }
}