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

Wed Nov 15 2023


As you already know, this portfolio is powered by NextJS and, until recently, it ran on version 12. Now, with all the new features and improvements brought into the NextJS 14, I have decided to upgrade the code of my portfolio website and bring it up to date.

I decided to run the upgrade command and fix the errors as they came up.

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

I also upgraded TailwindCSS, GraphQL and DaisyUI while at it.

The plan was as follows:

  1. Update next/link in the code
  2. Update next/image in the code
  3. Implement the App directory
  4. Implement the next/font
  5. Migrate from JS to TypeScript
  6. Optimise and clean the code


The first set of errors I ran into when I started the website on the dev server * was the issue of having <a> tags as children in the <Link> built into NextJS.

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

I just searched for all the <a> tags in my projects by using the cmd + shift + F shortcut in VSCode and removed them manually where needed. After a short research, it appeared there is a script* you can run to fix this automatically, without removing the tags manually.

* npx @next/codemod new-link .

This will transforrm <Link><a id="link">Home<a></Link> into <Link id="link">Home</Link>.

Alternatively, you can just add legacyBehavior as a prop to your <Link> and leave the code as is.

<Link legacyBehavior>

Made with Next.JS, Tailwind CSS, GraphCMS and Lots of