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

next/link

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>
   <a>Home<a>
</Link>