Upgrade Blog to Next.js 14.1

Shen Lu
Shen Lu
Posted on Feb 16, 2024
views
1 min read (153 words)

I have not update my blog for almost 8 mouths from May 2023. Next.js has already been upgraded to the verion of 14.1.0 So it is a time to start upgrading my blog to the latest version of Next.js.

Upgrade from 13.4 to 14.1

    1. Switch Pages Router to App Router
    1. Use Metadata API to define metadata, such as meta and link tags inside your HTML head element for improved SEO and web shareability.
    1. Create an opengraph-image or twitter-image route to generate a route segment's shared image
    1. Switch Prisma ORM to serverless KV with Redis API powered by Upstash
    1. Replace heroicons with react-icons

Conclusion

I am very satisfied with the Next.js v14.1 design philosophy, especially in Metadata API and Open Graph image generation. However, Contentlayer was not maintained for a long time. I was trying to find another way to substitute it.