Deploying, Migration from CRA & Next Steps

Push your repo to GitHub/GitLab/Bitbucket and import it in Vercel. Set environment variables (AUTH_SECRET, database URLs) in the project settings.

Deploy to Vercel

Push your repo to GitHub/GitLab/Bitbucket and import it in Vercel. Set environment variables (AUTH_SECRET, database URLs) in the project settings.

Every push to main can production-deploy; preview URLs appear on pull requests.

Real-life example: Vercel deploy is a moving company that already knows your apartment layout — connect the repo, hand them the keys (env vars), and furniture appears online.

Tip: Run npm run build locally before your first deploy. Most Vercel failures are the same errors you would see at build time on your laptop.

Pre-deploy checklist

npm run build
# fix any TypeScript or ESLint errors first

# required env on Vercel (examples)
# AUTH_SECRET
# AUTH_GOOGLE_ID / AUTH_GOOGLE_SECRET
# MONGODB_URI

Static HTML export

If you need pure static hosting (no Node server), set output: 'export' in next.config. You lose features that need a server: Route Handlers at runtime, ISR, some dynamic server APIs.

Good for marketing sites and docs. Not ideal for auth-heavy dashboards.

Real-life example: Static export is printing a brochure PDF — beautiful and fast to hand out, but it cannot check today's stock levels live.

Static export config

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  images: { unoptimized: true }, // or use a custom loader
};

export default nextConfig;

// then: npm run build → out/ folder ready for any static host

Migrating from Create React App

Move pages into app/ routes. Replace react-router with file-based routing and next/link. Move index.html meta into metadata exports. Convert client-only pages gradually; introduce Server Components where data fetching is simple.

Environment variables change from REACT_APP_ to NEXT_PUBLIC_ for browser-exposed values.

Real-life example: CRA to Next is moving from a studio apartment (client-only) to a house with a kitchen upstairs (server) — same furniture (React), new rooms and plumbing.

Create Next app → copy components into src/components
Map each React Router route to an app/.../page.tsx
Replace react-helmet with metadata / generateMetadata
Move API calls from useEffect to Server Components when possible

Course conclusion, next steps & cache tip

You covered App Router foundations through Auth.js, APIs, MongoDB sketches, metadata, performance, SEO, testing, UI practice, config, interviews, and deploy.

Next steps: build one portfolio project from lesson 41, add tests for your critical paths, and read the official Next.js docs when APIs change — the framework moves fast.

When local behavior looks "stuck" after config changes, reset the Next.js cache.

Real-life example: Clearing .next is shaking crumbs out of the toaster — old crumbs (cached builds) stop burning the next slice.

Build and deploy a small authenticated app
Practice interview answers out loud
Follow Next.js release notes for Auth.js and caching changes
Keep learning TypeScript, SQL/NoSQL, and testing

Tip: Bookmark nextjs.org/docs — when something fails after an upgrade, the docs and the migration guide beat random Stack Overflow answers.

Reset Next.js dev cache

# Stop the dev server first (Ctrl+C), then:
rm -rf .next

# Start again
npm run dev