Upgrading NextJS 12 to 14 (Part 1: next/link)

As you already know, this portfolio is powered by NextJS and, until recently, it ran on version 12. With all the new features and performance improvements brought into NextJS 14, I decided to upgrade the codebase and bring it completely up to date.

The Upgrade Plan

• Update `next/link` throughout the codebase
• Update `next/image` to native `<img>`
• Migrate to the App Router
• Implement `next/font` to eliminate render-blocking web fonts
• Complete TypeScript strict mode migration
• Optimize and clean CSS

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Resolving next/link Errors

The first error encountered upon booting the dev server was: > Error: Invalid `<Link>` with `<a>` child. Please remove `<a>` or use `<Link legacyBehavior>`.

In Next.js 13+, `<Link>` renders the underlying anchor tag automatically. Wrapping an explicit `<a>` inside `<Link>` is no longer needed:

// Before
<Link href="/about">
  <a>About</a>

// After <Link href="/about"> About </Link> ```

Removing redundant anchor tags cleaned up the JSX and eliminated hydration mismatches!