Deployment
Deploy your documentation site to production
Deployment
Learn how to deploy your documentation site to various platforms.
Vercel (Recommended)
Vercel is the easiest way to deploy Next.js applications.
Install Vercel CLI
npm install -g vercelLogin to Vercel
vercel loginAuto Deployment
Connect your GitHub repository to Vercel for automatic deployments:
- Go to vercel.com
- Click "New Project"
- Import your Git repository
- Configure build settings (usually auto-detected)
- Click "Deploy"
Every push to your main branch will automatically trigger a new deployment.
Netlify
Install Netlify CLI:
npm install -g netlify-cliLogin:
netlify loginDeploy:
netlify deploy --prod- Go to netlify.com
- Click "Add new site" → "Import an existing project"
- Connect your Git provider
- Select your repository
- Configure build settings:
- Build command:
npm run build - Publish directory:
.next
- Build command:
- Click "Deploy site"
Cloudflare Pages
Connect Repository
- Go to Cloudflare Pages dashboard
- Click "Create a project"
- Connect your Git repository
Configure Build
Set the following build settings:
| Setting | Value |
|---|---|
| Framework preset | Next.js |
| Build command | npm run build |
| Build output | .next |
| Node version | 18 or higher |
Deploy
Click "Save and Deploy" to start the build process.
Make sure to set NODE_VERSION environment variable to 18 or higher.
Self-Hosting
Docker
Create a Dockerfile:
FROM node:18-alpine AS base
# Install dependencies
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
# Build app
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
# Production image
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]Build and run:
docker build -t my-docs .
docker run -p 3000:3000 my-docsTraditional Server
Build your application:
npm run buildStart the production server:
npm run startSet up a reverse proxy (nginx example):
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}Environment Variables
Make sure to set required environment variables in your deployment platform.
Common variables:
# Required
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
# Optional
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id
NODE_ENV=productionStatic Export
Static export has limitations. Some Next.js features won't work.
Configure in next.config.mjs:
export default {
output: 'export',
images: {
unoptimized: true,
},
};Build static site:
npm run buildThe static files will be in the out directory.
Performance Optimization
Enable Caching
// next.config.mjs
export default {
headers: async () => [
{
source: '/_next/static/:path*',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable',
},
],
},
],
};Compress Assets
Most platforms automatically compress assets. Verify in your platform settings.
Enable compression in your reverse proxy:
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;Monitoring
After deployment, monitor your site:
- Uptime: Use services like UptimeRobot
- Performance: Google PageSpeed Insights
- Analytics: Google Analytics, Vercel Analytics
- Errors: Sentry, LogRocket