Skip to content

frontendlane/responsify.dev

BranchesTags

Repository files navigation

Responsify

Source code for https://responsify.dev.

Todos

const nextConfig: NextConfig = { output: "export", images: { unoptimized: true, // Cloudflare Pages can’t run Next.js’ image optimizer }, // Optional: If you want to catch mistakes experimental: { // Ensures static rendering where possible typedRoutes: true, }, };

export default nextConfig;

What this does:

output: "export" → enables static export mode (next export behavior).

images.unoptimized → disables dynamic image optimization API.

You’ll get a /out directory ready for Cloudflare Pages.

⚡ 2. Make sure all routes are static Static export doesn’t support any dynamic server logic, so check for: ❌ Not allowed in static export:

fetch() calls without { cache: 'force-cache' } or { next: { revalidate: ... } }

cookies(), headers(), or any server-only runtime

Dynamic route segments without generateStaticParams()

Using generateMetadata() that depends on dynamic data

Route handlers (route.ts or route.js files)

✅ Allowed / works fine:

generateStaticParams() for static dynamic routes

Static fetch() with cached data

Static assets in /public

All React Server Components that don’t rely on runtime data

🧱 3. Example static app directory setup tsxCopy code// app/page.tsx export default function Home() { return (

Hello Cloudflare Pages 👋

This site is statically exported from Next.js 15!

); }

tsxCopy code// app/about/page.tsx export default function About() { return

About Us

; }

✅ After running npm run build, you’ll get: bashCopy code/out index.html /about/index.html /_next/static/

🧱 4. Update your package.json scripts Make sure your build command looks like this: jsonCopy code{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } }

You do not need a separate next export command — next build will automatically do the export when output: "export" is set.

🚀 5. Deploy to Cloudflare Pages Option 1: Dashboard (recommended)

Go to Cloudflare Pages.

Click Create a new project → connect your GitHub repo.

Configure:

Framework preset: Next.js

Build command: npm run build

Build output directory: out

Click Deploy — done 🎉

Cloudflare will:

Install dependencies

Run npm run build

Serve your /out folder as static HTML + assets globally

Option 2: Manual deploy with Wrangler If you prefer CLI deploys: bashCopy codenpx wrangler pages deploy ./out --project-name=my-nextjs15-static

This uploads your /out directory directly to Cloudflare Pages.

🧠 6. Common gotchas ProblemCauseFixBuild fails with “Dynamic server usage”A route uses fetch() without cachingUse fetch(url, { cache: 'force-cache' }) or prebuild dataImages not showingNext.js image optimization disabledUse tags or next/image with unoptimizedDynamic routes missingYou didn’t define generateStaticParams()Add that in each dynamic segment folder404 for some routesMissing trailing slashes in exportSet trailingSlash: true in next.config.ts if needed

✅ 7. Example minimal configuration (ready-to-deploy) next.config.ts tsCopy codeimport type { NextConfig } from "next";

const nextConfig: NextConfig = { output: "export", images: { unoptimized: true, }, trailingSlash: true, };

export default nextConfig;

app/page.tsx tsxCopy codeexport default function Page() { return

Deployed on Cloudflare Pages 🚀

; }

Deploy steps: bashCopy codenpm run build npx wrangler pages deploy ./out

notes

  • babel-plugin-react-compiler needed to be able to use react-compiler (opts out of next.js' rust-based compiler)

Technologies

npm

Another reason why not using pnpm: pnpm/pnpm#6759

EditorConfig

EditorConfig sets some formatting rules for your code editor, such as starting new files with tab indentation. While Prettier can handle most of these rules, using EditorConfig on new files helps avoid unnecessary reformatting by Prettier.

TypeScript

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro --help Get help using the Astro CLI

About

A CSS technique that helps developers avoid ugly layout jumps while users resize their browsers.

responsify.dev

Topics

css responsive scss media-query calc

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Contributors

Languages