+ Demonstration of server-side and client-side environment variable usage +
++ These variables are only accessible on the server and are not exposed to the client. +
+ ++ These variables use the NEXT_PUBLIC_ prefix and are accessible on both server and client. +
+ ++ Environment variables in Cloudflare Workers can be configured in multiple ways. +
+ +
+{`[vars]
+ENVIRONMENT = "production"
+SERVER_ID = "cloudflare-worker-1"
+API_URL = "https://api.example.com"`}
+
+ + Environment variables can also be set through the Cloudflare Workers dashboard under Settings → Variables. +
+
+ Use wrangler secret put SECRET_NAME for sensitive data like API keys and database passwords.
+
+{`// Server-side only
+const dbUrl = process.env.DATABASE_URL
+const apiKey = process.env.API_SECRET
+
+// Client-side accessible
+const publicApiUrl = process.env.NEXT_PUBLIC_API_URL
+const appName = process.env.NEXT_PUBLIC_APP_NAME
+
+// With validation
+if (!process.env.DATABASE_URL) {
+ throw new Error('DATABASE_URL is required')
+}`}
+
+ + Demonstration of Next.js font optimization features and web font loading strategies +
++ Using system fonts provides the fastest loading experience and works reliably in all environments. +
+ ++ This is rendered using the default sans-serif font stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif +
++ This is rendered using the serif font stack: Georgia, Cambria, "Times New Roman", Times, serif +
++ This is rendered using the monospace font stack: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace +
++ This demo uses system fonts as a fallback strategy that works reliably in all environments, + including Cloudflare Workers with network restrictions. In production, you can configure + Google Fonts or custom fonts with proper network access. +
+ ++ Demonstration of Next.js Image component optimization features and performance benefits +
++ This image demonstrates responsive sizing and blur placeholder using data URIs. +
+ +Features: Responsive sizing, blur placeholder, priority loading
++ Demonstration of various image sizes and aspect ratios with Next/Image optimization. +
+ +Square (1:1)
+Portrait (3:4)
+Landscape (4:3)
++ These images demonstrate lazy loading behavior - they only load when they come into view. +
+ ++ This image loads when it comes into view, reducing initial page load time. +
+
+{`import Image from 'next/image'
+
+
+ + This page is statically generated and revalidated every 60 seconds. The content updates automatically without rebuilding the entire site. +
++ {post.content} +
++ Demonstration of Next.js ISR with automatic revalidation and edge caching +
++ This page is statically generated and revalidated every 30 seconds. + Individual posts revalidate every 60 seconds. +
++ Last updated: {data.lastUpdated} +
++ {post.excerpt} +
+ +
+{`// Enable ISR with revalidation
+export const revalidate = 60 // seconds
+
+// Generate static params for popular content
+export async function generateStaticParams() {
+ return [{ id: '1' }, { id: '2' }, { id: '3' }]
+}`}
+
+ +
{route.description}
- {route.path.startsWith('/api') ? 'View API Response' : 'View Demo'} -