Panji Asniar

Panji Asniar

Upgrading a Next.js Blog from 14 to 16 Without Rewriting It

Upgrading Next.js does not have to mean rebuilding your blog. If a project already works well with the Pages Router, you can keep its structure while updating the framework and its dependencies.

Check Versions and Requirements

Start by checking installed packages, available updates, and known vulnerabilities:

npm outdated
npm audit
npm view next@latest engines peerDependencies

Next.js 16 requires Node.js 20.9.0 or newer. Choose a supported LTS release, such as Node.js 24, and use the same major version in development and production.

Review both the Next.js 15 and Next.js 16 upgrade guides before skipping major versions.

Keep the Pages Router

Moving to Next.js 16 does not require moving from pages/ to app/. Existing Pages Router features such as getStaticProps and getStaticPaths remain available.

Update Next.js and React to compatible stable versions. When the latest stable Next.js release is in the 16.x line, you can use:

npm install next@latest react@latest react-dom@latest

Check the resolved versions and commit the updated lockfile. Treat an App Router migration as a separate task, not a prerequisite for upgrading.

Review Changes That Affect Your App

Next.js 16 uses Turbopack by default for development and production builds. Projects with custom Webpack configuration may need adjustments or an explicit next build --webpack command.

For App Router routes, request APIs such as cookies(), headers(), and route params require asynchronous access. This does not mean rewriting params inside Pages Router getStaticProps.

Also review image configuration and dependencies flagged by the audit. Avoid running npm audit fix --force without inspecting the proposed changes.

Test Before Deploying

Verify a clean installation and a production build:

npm ci
npm test
npm run build
npm audit

Run npm test if your project defines a test script. Then start the production server with npm start and check the home page, article routes, images, and 404 behavior.

A successful build is only one checkpoint. Confirm that the hosting platform uses the intended Node.js version and that production serves the new deployment.

Keep the upgrade focused: update dependencies, address relevant breaking changes, and verify existing behavior. A router migration or redesign can wait until there is a separate reason to do it.

← cd ~