How to Deploy Next.js App

Next.js is one of the most powerful and widely adopted React frameworks for building modern web applications. Its server-side rendering (SSR), static site generation (SSG), API routes, and built-in optimizations make it ideal for performance-critical applications ranging from blogs and marketing sites to enterprise-grade dashboards and e-commerce platforms. However, knowing how to build a Next.js app is only half the battle deploying it correctly ensures your application reaches users quickly, securely, and at scale.

Deploying a Next.js app involves more than just uploading files. It requires understanding build outputs, environment variables, server configurations, caching strategies, and platform-specific nuances. Whether you're a developer deploying your first personal project or a team scaling a production application, mastering deployment is essential for delivering a seamless user experience.

This comprehensive guide walks you through every critical aspect of deploying a Next.js application from setting up your project for production to choosing the right hosting platform, optimizing performance, and troubleshooting common issues. By the end, youll have a clear, actionable roadmap to deploy your Next.js app confidently across multiple environments.

Step-by-Step Guide

1. Prepare Your Next.js Project for Production

Before deploying, ensure your Next.js application is optimized for production. Start by verifying your project structure and configuration.

First, confirm youre using a supported version of Next.js. As of 2024, Next.js 14 with App Router is the recommended version for new projects. If youre using the older Pages Router, consider migrating to take advantage of improved performance and features like Server Components and Streaming.

Update your package.json to include essential scripts:

{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export"
}
}

The build script generates optimized static files and server-side bundles. The start script launches the production server, while export creates a fully static site (useful for static hosting platforms like GitHub Pages or Netlify).

Next, verify your next.config.js file. For most deployments, minimal configuration is needed, but ensure youve set up environment variables correctly:

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['your-cdn-domain.com'],
},
env: {
API_URL: process.env.API_URL,
},
}
module.exports = nextConfig

Use environment variables for sensitive data (like API keys) and avoid hardcoding them. Store them in a .env.local file during development and define them in your deployment platforms settings for production.

2. Build Your Next.js Application

Once your project is ready, run the production build command:

npm run build

or

yarn build

This command generates a .next folder containing:

• Server-side code (Node.js bundles)
• Static HTML files (for SSG pages)
• Client-side JavaScript bundles
• Metadata and route manifests

During the build process, Next.js automatically:

• Minifies JavaScript and CSS
• Optimizes images using Next.js Image component
• Pre-renders pages (SSG or SSR based on your code)
• Creates code-split bundles for faster loading

After the build completes, inspect the .next folder. Youll notice a server directory containing the Node.js server bundle and a static folder with optimized assets.

3. Choose Your Deployment Strategy

Next.js supports multiple deployment strategies depending on your needs:

3.1. Server-Side Rendered (SSR) or Hybrid Apps

If your app uses getServerSideProps, API routes, or dynamic data fetching, you need a Node.js runtime to serve the application. Platforms like Vercel, Render, Railway, and AWS Elastic Beanstalk support Node.js deployments.

For these apps, youll run the built server using:

npm start

This starts the Next.js production server on port 3000 (by default), ready to handle incoming HTTP requests.

3.2. Static Site Generation (SSG) Apps

If your site uses getStaticProps and doesnt require server-side logic at request time, you can export it as a fully static site:

npm run export

This generates a out folder containing static HTML, CSS, and JavaScript files perfect for hosting on CDNs like Netlify, Cloudflare Pages, GitHub Pages, or Amazon S3.

Static exports are faster, cheaper, and more secure since theres no server-side code to maintain or exploit.

4. Deploy to Vercel (Recommended)

Vercel is the company behind Next.js and offers seamless, optimized deployment. It automatically detects Next.js projects and applies best practices without configuration.

Follow these steps:

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).
2. Sign up at vercel.com and connect your repository.
3. Click New Project and select your Next.js repo.
4. Vercel auto-detects it as a Next.js project and configures the build settings automatically.
5. Click Deploy. Vercel runs next build, then serves your app globally via its edge network.

Vercel automatically:

• Enables HTTPS with free SSL certificates
• Applies automatic image optimization
• Implements edge caching and CDN delivery
• Provides preview deployments for every pull request
• Offers serverless functions for API routes

Once deployed, youll receive a unique URL like your-app.vercel.app. You can also connect a custom domain via DNS settings.

5. Deploy to Netlify

Netlify is another excellent option, especially for static exports. For SSR apps, Netlify supports serverless functions and Edge Functions.

For static exports:

1. Run npm run export to generate the out folder.
2. Push your code to a Git repository.
3. Sign up at netlify.com.
4. Click New site from Git and connect your repo.
5. Set the build command to: npm run export
6. Set the publish directory to: out
7. Click Deploy site.

For SSR apps, use Netlifys serverless functions:

• Keep your .next folder and deploy the entire project.
• Set the build command to: npm run build
• Set the publish directory to: .next
• Netlify will automatically convert your API routes into serverless functions.

6. Deploy to Render

Render is a simple, affordable platform for Node.js applications.

1. Push your code to a Git repo.
2. Sign up at render.com.
3. Click New + ? Web Service.
4. Connect your repository.
5. Set the build command to: npm run build
6. Set the start command to: npm start
7. Set the environment to: Node.js
8. Click Create Web Service.

Render automatically detects your Node.js app and provisions a server. It also supports custom domains and automatic SSL.

7. Deploy to AWS (ECS, EC2, or Lambda)

For enterprise teams requiring full control, AWS offers multiple options:

EC2 Instance

1. Launch an EC2 instance (Ubuntu or Amazon Linux).
2. Install Node.js and npm.
3. Clone your repo: git clone your-repo-url
4. Run: npm install && npm run build
5. Run: npm start
6. Use PM2 to keep the server running: npm install -g pm2 && pm2 start npm -- start
7. Configure Nginx as a reverse proxy and set up SSL via Lets Encrypt.

AWS Lambda (via Serverless Framework or Vercel-style)

Use serverless-next.js to deploy Next.js apps to AWS Lambda:

npm install -g serverless
npm install serverless-next.js

Then create a serverless.yml file:

component: serverless-next.js
inputs:
domain: ["yourdomain.com", "www.yourdomain.com"]
bucketName: your-nextjs-bucket

Run: serverless to deploy.

This approach scales automatically and reduces infrastructure management.

8. Deploy to GitHub Pages (Static Only)

GitHub Pages is free and ideal for static sites. Only use this if youve exported your app using next export.

1. Run npm run export to generate the out folder.
2. Create a new branch called gh-pages (or use the main branch).
3. Commit and push the out folder contents.
4. Go to your repo ? Settings ? Pages.
5. Set source to: gh-pages branch or / (root) if using main.
6. Save. Your site will be live at https://yourusername.github.io/your-repo.

Important: GitHub Pages does not support server-side rendering or API routes. Only static content works.

Best Practices

1. Optimize Images and Assets

Next.js includes the next/image component, which automatically optimizes images. Always use it instead of standard <img> tags:

import Image from 'next/image'

src="/profile.jpg"
alt="Profile"
width={500}
height={500}
priority
/>

Use the priority flag for above-the-fold images to preload them. Avoid large, unoptimized PNGs or JPEGs convert to WebP where possible.

2. Use Environment Variables Correctly

Never commit sensitive data to version control. Use .env.local for local development and define environment variables in your deployment platforms dashboard.

Prefix all environment variables used in the browser with NEXT_PUBLIC_:

NEXT_PUBLIC_API_URL=https://api.yourapp.com
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

Only these variables are exposed to the browser. Others remain server-side.

3. Implement Caching Strategies

Use cache headers effectively:

• Static assets (JS, CSS, images): Cache for 1 year using immutable cache headers.
• HTML pages: Use stale-while-revalidate (SWR) with short TTLs (e.g., 60s).
• API responses: Set appropriate cache-control headers based on data freshness requirements.

Vercel and Cloudflare handle this automatically. On self-hosted servers, configure Nginx or your Node.js server to set headers:

app.use(express.static('public', {
maxAge: '1y',
etag: true
}))

4. Monitor Performance and Errors

Integrate performance monitoring tools like:

• Vercel Analytics Built-in, zero-config performance insights
• Google Analytics 4 Track user behavior
• Sentry Capture frontend and backend errors
• Web Vitals Monitor LCP, FID, CLS using next/router or next/font

Add this to your app/layout.js (App Router):

import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
)
}

5. Use Server Components and Streaming

Next.js 13+ introduced Server Components, which reduce client-side JavaScript and improve load times. Use them for data-heavy components that dont require interactivity.

Combine with React Suspense and streaming for faster perceived load times:

export default function Page() {
return (
<div>
<Suspense fallback="Loading...">
<UserProfile />
</Suspense>
<Comments />
</div>
)
}

This allows the server to send HTML progressively, improving Core Web Vitals.

6. Enable Compression

Enable Gzip or Brotli compression on your server. Most platforms do this automatically. For self-hosted servers, configure Nginx:

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

7. Test Before Deployment

Always test your production build locally before deploying:

npm run build
npm run start

Visit http://localhost:3000 and verify:

• All routes load correctly
• Images render
• API routes return expected data
• Environment variables are resolved

Use Lighthouse in Chrome DevTools to audit performance, accessibility, and SEO.

Tools and Resources

Deployment Platforms

• Vercel Best for Next.js. Zero-config, edge network, preview deployments.
• Netlify Excellent for static sites and serverless functions.
• Render Simple Node.js hosting with free tier.
• Cloudflare Pages Fast global CDN with built-in CI/CD.
• GitHub Pages Free static hosting (SSG only).
• AWS Amplify Full-stack deployment with CI/CD and hosting.
• Railway Developer-friendly cloud platform with easy Node.js support.

Performance and Monitoring

• Vercel Analytics Real-time performance metrics.
• Sentry Error tracking for frontend and backend.
• Google Analytics 4 User behavior and conversion tracking.
• Web Vitals Core metrics (LCP, FID, CLS) for SEO and UX.
• Lighthouse Chrome DevTools audit tool for performance, SEO, accessibility.

Build and Optimization Tools

• next/image Automatic image optimization.
• next/font Self-host Google Fonts with zero layout shift.
• next-pwa Add Progressive Web App capabilities.
• next-sitemap Auto-generate sitemap.xml for SEO.
• eslint-plugin-next Enforce Next.js best practices.

Documentation and Learning

• Next.js Official Documentation
• Vercel Documentation
• Next.js Learn Course Free interactive tutorials.
• Next.js Examples Repository Real-world code samples.

Real Examples

Example 1: Personal Blog with SSG

A developer builds a personal blog using Markdown files and getStaticProps to pre-render all posts at build time. They use next-sitemap to generate a sitemap and next/image for optimized featured images.

Deployment:

• Code hosted on GitHub.
• Connected to Vercel.
• Build command: npm run build
• Deployed automatically on every push to main.
• Custom domain: blog.johndoe.dev configured via DNS.

Result: 98/100 Lighthouse score, load time under 800ms globally, zero server costs.

Example 2: E-commerce Dashboard with SSR

An enterprise team builds a product dashboard that fetches real-time inventory data from an internal API. They use getServerSideProps on the dashboard page and API routes for authentication.

Deployment:

• Code hosted on GitLab.
• Deployed on Render with a Node.js web service.
• Environment variables for API keys set in Render dashboard.
• SSL enabled automatically.
• Monitoring via Sentry to track errors in API calls.

Result: 100% uptime, sub-500ms response times, secure authentication, scalable to 10,000+ concurrent users.

Example 3: Marketing Site on Cloudflare Pages

A startup launches a landing page with animations and form submissions. They use static export to generate HTML and host on Cloudflare Pages.

Deployment:

• Run next export.
• Push out folder to GitHub.
• Connected to Cloudflare Pages.
• Automatic SSL, CDN, and DDoS protection enabled.
• Form submissions handled via Cloudflare Workers (serverless functions).

Result: 100% static, loads in 300ms on mobile, cost: $0/month.

FAQs

Can I deploy a Next.js app for free?

Yes. Vercel, Netlify, Cloudflare Pages, and GitHub Pages offer free tiers suitable for personal projects, portfolios, and small sites. Render and Railway also provide generous free allowances for small applications.

Whats the difference between next build and next export?

next build generates server-side code and static files for apps that need server-side rendering or API routes. next export generates a fully static site without any server-side code ideal for platforms that only serve static files.

Why is my Next.js app loading slowly after deployment?

Common causes include:

• Unoptimized images (not using next/image)
• Large JavaScript bundles (check bundle analyzer)
• Missing cache headers
• Serverless cold starts (on platforms like Netlify or Vercel)

Run Lighthouse and check the Opportunities section for fixes.

Do I need a server to run Next.js?

Only if youre using SSR or API routes. For static sites (SSG), you can host on any CDN without a server. Vercel and Netlify abstract the server layer for you.

How do I handle environment variables in production?

Never store them in code. Use your deployment platforms environment variable settings (e.g., Vercel ? Settings ? Environment Variables). Prefix browser-accessible variables with NEXT_PUBLIC_.

Can I deploy Next.js to shared hosting like Bluehost?

No. Shared hosting doesnt support Node.js servers or custom build steps. Use Vercel, Netlify, or Render instead.

How do I deploy a Next.js app with a database?

Use a cloud database (Supabase, Firebase, MongoDB Atlas, PostgreSQL on Render) and connect via API routes. Never expose database credentials in client-side code. Use server-side fetching in getServerSideProps or Server Components.

What should I do if my custom domain isnt working?

Ensure:

• DNS records are correctly configured (CNAME or A records)
• SSL certificate is issued (takes a few minutes)
• Youve added the domain in your deployment platforms settings
• Youve waited 2448 hours for DNS propagation if recently changed

How do I roll back a deployment?

On Vercel and Netlify, you can revert to any previous deployment from the dashboard. On GitHub-based platforms, roll back by reverting the commit and pushing again.

Conclusion

Deploying a Next.js application is not a one-size-fits-all process it requires choosing the right strategy based on your apps architecture, performance needs, and scalability goals. Whether youre building a static marketing site, a dynamic e-commerce dashboard, or a real-time analytics tool, the principles remain the same: optimize your build, secure your environment variables, leverage caching, and choose a platform that aligns with your technical requirements.

Vercel remains the most seamless option for most Next.js developers due to its deep integration, automatic optimizations, and global edge network. For static sites, Cloudflare Pages and Netlify offer excellent alternatives with strong performance and reliability. Enterprise teams may opt for AWS or self-hosted solutions for maximum control.

Remember: deployment is not the end its the beginning of ongoing optimization. Monitor your apps performance, iterate on user feedback, and keep your dependencies updated. With the right practices, your Next.js app will deliver blazing-fast, secure, and scalable experiences to users around the world.

Now that you understand how to deploy Next.js apps confidently, take your next project live and dont forget to celebrate the moment your app goes from local development to global reach.