Professional Portfolio with Next.js 13 and Notion Backend
Wagner Caetano
July 18, 2023
Introduction
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.
Structure
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 ...