Configuration Files
4 files
Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
Next.js configuration for static export to Cloudflare Pages
javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
trailingSlash: true,
// Optional: Add base path if deploying to subdirectory
// basePath: '/my-app',
}
module.exports = nextConfig Pro Tips
- ⚡ output: "export" generates static HTML files (no server needed)
- 🖼️ unoptimized: true required for static export (no Image Optimization API)
- 🔗 trailingSlash: true ensures consistent URLs across pages
- 💡 For SSR on Cloudflare, use @cloudflare/next-on-pages instead
- 📦 Static export means no API routes or server-side features
- 🎯 Perfect for blogs, marketing sites, and documentation
Project dependencies and build scripts
json
{
"name": "my-nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^20.0.0",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.54.0",
"eslint-config-next": "^14.0.0",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"typescript": "^5.3.0"
}
} Pro Tips
- 📦 Next.js 14+ includes App Router by default
- ⚡ npm ci in CI/CD is faster and more reliable than npm install
- 🎨 Tailwind CSS included for styling (optional)
- 📝 TypeScript support built-in
- 💡 Run "npm run dev" for local development with hot reload
- 🔧 Customize scripts for your specific needs
Environment variables template (copy to .env.local)
bash
# Public variables (exposed to browser, prefix with NEXT_PUBLIC_)
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_SITE_URL=https://my-nextjs-app.pages.dev
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
# Private variables (server-side only, NOT available in static export)
# Note: These won't work with static export - use build-time env vars instead
# DATABASE_URL=postgresql://...
# API_SECRET_KEY=your-secret-key
# Build-time variables (baked into static files)
NEXT_PUBLIC_BUILD_TIME=${new Date().toISOString()} Pro Tips
- 🔒 NEXT_PUBLIC_ prefix makes variables available in browser
- ⚠️ Static export = no server-side secrets (everything is public)
- 🏗️ Build-time variables are baked into static files
- 💡 Copy this to .env.local for local development
- 🚫 Never commit .env.local to git (add to .gitignore)
- 🎯 For secrets, use Cloudflare Workers or external API
Files and directories to exclude from version control
bash
# Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Next.js /.next/ /out/ /build # Production /dist # Misc .DS_Store *.pem # Debug npm-debug.log* yarn-debug.log* yarn-error.log* # Local env files .env*.local .env # Vercel .vercel # TypeScript *.tsbuildinfo next-env.d.ts
Pro Tips
- 📁 /out/ is the static export directory (generated by build)
- 🔒 .env*.local files contain secrets - never commit these
- 📦 node_modules should always be in .gitignore
- ⚡ .next/ is the build cache directory
- 💡 This is the standard Next.js .gitignore template
- 🎯 Customize based on your project needs