Deployment

Level: Beginner to Intermediate

ℹ️ What You'll Learn

• Building for production with npm run build
• Environment variables for production
• Deploying to Vercel (easiest)
• Docker containerization for custom servers
• Static exports vs server rendering choices
• API base URL configuration
• Monitoring and logging in production
• SMS app on production infrastructure

Why This Matters

Deployment is part of building production React applications with Next.js. You will use it when creating student dashboards, SEO-friendly pages, API-connected forms, route handlers, layouts, and deployments for .NET-backed systems.

Before deploying a Next.js app, create a production build.

npm run build

Then run it locally:

npm run start

The Problem

Beginners often treat Next.js like plain React and miss routing, rendering, server/client boundaries, environment variables, and deployment behavior. This lesson shows how Deployment works in a real School Management System frontend that talks to ASP.NET Core APIs.

Environment Variables

Use .env.local for local development:

ASP_NET_API_URL=https://localhost:5001

In production, configure the same variable in your hosting provider.

Build Output

Next.js optimizes:

• JavaScript bundles
• CSS
• route assets
• server-rendered pages
• static pages
• images and fonts

Hosting Options

Common options:

• Vercel
• Azure App Service
• Docker
• VPS with Node.js
• Static export for limited static-only sites

Next.js with ASP.NET Core

You can deploy separately:

next.school.com      -> Next.js frontend
api.school.com       -> ASP.NET Core Web API

Or behind one reverse proxy:

school.com           -> Next.js frontend
school.com/api       -> ASP.NET Core Web API

Production Checklist

• Run npm run build
• Configure production API URL
• Configure CORS in ASP.NET Core if browser calls API directly
• Use HTTPS
• Set secure cookie options
• Do not expose secrets with NEXT_PUBLIC_
• Check pages on mobile
• Test login, logout, refresh, and protected pages

⚠️ Development URLs

Do not deploy code that still calls localhost. Production users cannot reach your development machine.

💡 Smoke test

After deployment, open the app in a private browser window and test the full login-to-save flow.

Interview Questions

🎯 Why run npm run build before deployment?

It creates the optimized production build and catches route, rendering, and dependency errors before users see them.

🎯 What is the main deployment concern when Next.js calls ASP.NET Core?

The frontend must use the correct production API URL, and the backend must allow secure authenticated requests from the frontend origin.

Quick Definitions

• Deployment - The main Next.js concept explained in this lesson.
• App Router - The modern Next.js routing system based on the app folder.
• Server/Client boundary - The decision of whether code runs on the server or in the browser.
• ASP.NET Core integration - Calling or proxying backend APIs from a Next.js frontend.

Common Mistakes

• Treating every component as a Client Component without a reason
• Forgetting environment variables differ between local and production
• Calling ASP.NET Core APIs from the browser without handling CORS
• Putting secrets in NEXT_PUBLIC_ variables
• Skipping npm run build before deployment

Practice Task

Create a small Next.js example using Deployment. Keep it connected to a School Management System scenario.

Suggested practice:

1. Create or update a route, layout, form, or data-fetching example.
2. Use realistic student, teacher, attendance, or marks data.
3. Connect the example to an ASP.NET Core-style API URL or route handler.
4. Add one loading, empty, or error state where relevant.
5. Explain what runs on the server and what runs in the browser.

Quick Revision

Question	Answer
What is the main idea?	Use Deployment correctly in a Next.js App Router project.
Where is it used?	Pages, layouts, route handlers, forms, APIs, authentication, and deployment.
What should beginners watch carefully?	Server/client boundaries, environment variables, CORS, and production builds.
What is the best debugging habit?	Check terminal build output, browser console, network tab, and server logs.

🤖Use AI to Learn Faster

⚠️ Important for beginners: Do NOT use AI to write your code yet. Type every example yourself. Your brain learns by doing, not by reading AI output. Use AI only to explain and quiz you — not to code for you. Once you have strong fundamentals, AI becomes a powerful productivity tool for repetitive tasks.

Use ChatGPT, Claude, or Copilot to go deeper on Deployment. Try these prompts:

• "Explain Deployment with a Next.js and ASP.NET Core example"
• "Give me 5 practice tasks for Deployment in a School Management app"
• "Show common Next.js mistakes in Deployment and how to fix them"
• "Quiz me on Deployment with interview-style questions"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Next Article

ASP.NET Core Integration ->