Deployment & Production

1# 1. Push your code to GitHub/GitLab/Bitbucket
2git add .
3git commit -m "Ready for production"
4git push origin main
5
6# 2. Go to vercel.com, import your repo
7# 3. Click Deploy
8# That's it. Seriously.

1# Dockerfile
2FROM node:20-alpine AS builder
3WORKDIR /app
4COPY package*.json ./
5RUN npm ci
6COPY . .
7RUN npm run build
8
9FROM node:20-alpine AS runner
10WORKDIR /app
11COPY --from=builder /app/.next/standalone ./
12COPY --from=builder /app/.next/static ./.next/static
13COPY --from=builder /app/public ./public
14
15EXPOSE 3000
16CMD ["node", "server.js"]

1// next.config.ts - enable standalone output for Docker
2import type { NextConfig } from "next";
3
4const nextConfig: NextConfig = {
5output: "standalone",
6};
7
8export default nextConfig;

1// Dynamic import, only loads when needed
2import dynamic from "next/dynamic";
3
4const HeavyChart = dynamic(() => import("@/components/Chart"), {
5loading: () => <p>Loading chart...</p>,
6ssr: false, // Don't render on server if it uses window/document
7});
8
9export default function AnalyticsPage() {
10return (
11  <div>
12    <h1>Analytics</h1>
13    <HeavyChart />
14  </div>
15);
16}