Professional Portfolio with Next.js 13 and Notion Backend

Author Picture

Wagner Caetano

July 18, 2023

Post Picture


In this document, I will guide you through the process of creating a professional portfolio using Next.js 13 as the front-end framework and Notion as the back-end CMS (Content Management System). The idea was to create a portfolio website as free as possible, without having to pay for hosting a back-end infrastructure of any kind.

During this process, the first thing I’ve done it was organize a few inspirational designs, create the wire

frame and design, choose the best fonts and colors and think about the structure of each page and the content I would put in each page.

After that I started to look for ways to create the website using Notion as CMS, when I found a few people already using it with react or/and NextJs, so I decided to use NextJs so I would also learn a new technology. Along side with NextJs I also added Tailwind on my project to speed up the process of applying styles and also because its a cool lib to use.


As you might see, my portfolio is basically a landing page with my information, photo and background, a few testimonials and a contact section that sends my an email with your subject. Besides that there’s a project page where I’ve merged github repositories and a notion database so I can detail a project like this one or just reference it to my github repository page. Additionaly, I’ve added a Vercel link to see a live version of the code (if its a front-end code off course).

And another part thing I’ve added as well is a blog page, where it will list a few blog posts, about tutorials, projects and technologies I’ve learned or might learn in the future.

Libraries Used

  • Node Mailer: Send the email through Gmail email service, directly to an email that I use to check professional contect.
  • DayJs: Formatting date from notion pages/lists
  • NotionHQ/Client (deprecated): It still on my project, but because of new fetch API override by NextJs, I changed the client to a fetch approach so I can use “revalidate” feature to refetch data from the Notion
  • Lottie-react: I wanted to add a lottie because I like the idea it gives to the design (Just being fussy)
  • Notion to Md: Notion to markdown, so It can convert the data from notion to a markdown version
  • React Icons: Icons to display wherever I want
  • Slick Carousel + React Slick: Just the carousel for the testimonials

And the @types needed for everything there.

Challenges Faced

  • At first use Tailwind was kind hard because It was my first time, so the classes were very unknown to me. So I installed a vscode extension: Tailwind CSS IntelliSense
  • Get use to NextJs App Dir feature, at first I was confused about the idea of SSR, SSG, CSR so I studied a little bit about it and still need to learn more, but for now I think its ok.
  • Use the Link component from NextJs, I was replacing every route that I would navigate to.
  • Create a loading/shimmier effect on client side content. It still not good enough, but I’m getting there.
  • Improve Images loading/performance
  • Add the same structure of notion (bookmarks, embedded links) into react as markdown

Where I learned how to do that ?

Youtube, articles, blog posts:

docs.github.comenrestrepos?apiVersion=2022 11 28

medium.comnerd for techcoding a contact form with next js and nodemailer ...