Next.js 16 Build Issues: Proxy, Dynamic Rendering, and Revalidation Explained

While building my portfolio with Next.js 16, I encountered a couple of unexpected issues that are worth sharing.

Proxy Replaces Middleware

One of the first things I noticed was that Middleware has been renamed to Proxy. The Next.js team made this change to better describe its purpose and avoid confusion with traditional server middleware.

Migrating is simple:

npx @next/codemod@canary middleware-to-proxy .

The codemod automatically renames the file, updates the exports, and reports any remaining issues.

From now on, new Next.js projects should use proxy instead of middleware.

---

Understanding Dynamic Rendering

Another issue appeared during the production build.

When using Server Components, Next.js tries to render pages during the build. If your page fetches data from an API, that endpoint must be available at build time. Otherwise, you'll likely get a network error and the build will fail.

There are two common solutions.

Option 1: Force Dynamic Rendering

export const dynamic = "force-dynamic";

This prevents build-time rendering and always renders the page on demand.

Pros

• Fixes build failures.
• Always serves fresh data.

Cons

• Disables static generation.
• Slower response time because every request is rendered on the server.

This approach is best for dashboards, authenticated pages, or highly dynamic content.

---

Option 2: Use Revalidation (Recommended)

For most pages, Incremental Static Regeneration (ISR) is the better choice.

export const revalidate = 60;

The value is measured in seconds.

With this configuration, Next.js generates a static page during the build and regenerates it automatically after the specified interval.

For pages that rarely change—such as Contact, About, or Pricing—using larger values like 2000 or even 3600 seconds is completely reasonable.

---

Check Your Fetch Cache

If you're using the built-in fetch(), make sure caching hasn't been disabled accidentally.

fetch(url, {
  cache: "no-store",
});

or

fetch(url, {
  next: {
    revalidate: 0,
  },
});

Both configurations disable static optimization.

If you're using Axios, remember that it doesn't automatically integrate with the Next.js Data Cache like the native fetch() API.

---

Final Thoughts

In most public-facing applications, revalidation provides the best balance between SEO, performance, and fresh content.

Reserve force-dynamic only for pages that genuinely require real-time data.

References

• https://nextjs.org/docs/app
• https://nextjs.org/docs/app/building-your-application/data-fetching
• https://nextjs.org/docs/app/building-your-application/caching
• https://nextjs.org/docs/app/api-reference/file-conventions/proxy