upgrAde blog to next.js 14.1

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
• 2. use metadata Api to define metadata, such as meta and link tags inside your Html head element for improved seo and web shareability.
• 3. create an opengraph-image or twitter-image route to generate a route segment's shared image
• 4. switch prisma orm to serverless kv with redis Api powered by upstash
• 5. 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.