Full NextJS Project Tutorial: Portfolio Website

Master NextJS 14: Create a Dynamic Portfolio Website!
In this detailed tutorial, we build a dynamic and visually appealing project portfolio page using NextJS 14. Perfect for both beginners and seasoned developers, this video guides you through the entire process of setting up a captivating portfolio page.
🔍 What You'll Learn:
Setting up a new NextJS project with TypeScript, Tailwind CSS, and the App Router.
Integrating ContentLayer for efficient content management and importing content from a Notion database.
Building a grid layout for your portfolio using Tailwind CSS and creating detailed individual project pages.
Implementing a ContentLayer Schema to effectively manage your portfolio content.
Using @kodaps/notion-parse to seamlessly fetch content from Notion.
Techniques for managing content and creating responsive portfolio cards and detailed view pages.
📌 Key Features:
Learn to set up and configure NextJS 14 for your portfolio project.
Discover how to use ContentLayer for managing Markdown content.
Understand how to integrate Notion as a content source.
Explore the creation of visually engaging layouts with Tailwind CSS.
Get insights into handling dynamic content and routing in NextJS.
👨‍💻 For Developers:
Whether you're looking to showcase your work, enhance your web development skills, or explore NextJS capabilities, this video is an invaluable resource. We cover everything from initial setup to advanced features, ensuring you have a comprehensive understanding of building a portfolio site with NextJS.
🔗 Useful Links:
Full article: kodaps.dev/en/...
GitHub repository: github.com/Kod...
💬 Stay Connected:
Please sign up for my newsletter if you're interested in staying up to date with latest trends and news : kodaps.dev/en/...
👀 Related videos:
* Why I use ContentLayer with Markdown: • NextJS: ContentLayer ...
* How I use Notion with ContentLayer: • How I Use Notion as a ...
#NextJS #WebDevelopment #PortfolioWebsite #ContentLayer #NotionAPI #TailwindCSS #CodingTutorial"
----
Want to go into further depth? Head to kodaps.dev/

[@megi8555]

I’ve been dying to figure out how to use contentlayer with Next.js 14, and the override you showed did the trick! Thank you so much!
And thanks for the great tutorial also, using notion as a CMS was very new to me, and it was awesome.

[@shopdat]

Hey dude, super sharp content and production quality. I and others appreciate it!

[@KodapsAcademy]

Thanks for the encouraging words :)

[@TayambaMwanza]

Please cover the latest angular 17 changes, I love your style and I think the latest changes will be good content for you.

[@bennyyang8803]

Is there a way to set html structure for each slug seperately? I'm looking for each page to have different sections etc.

[@joshbleijenberg4000]

This is amazing

[@joshbleijenberg4000]

I do get the error @notionhq/client/build/src/Client.js:378:54)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'object_not_found',
status: 404,. But I checked the env variables 10 times and they seem right. Can there be other things why I do get that error

[@KodapsAcademy]

That would suggest you are not providing the notion database id correctly to the code :)

[@joshbleijenberg4000]

I still have some troubles haha, I got this error: Error while parsing Notion content: Error: No title or slug in front matter for 9e6829aa-************************* of type Portfolio. But that is not even my database id. @@KodapsAcademy

[@joshbleijenberg4000]

Okay, you cant have empty lines of rows in your database. That throws the error haha@@KodapsAcademy

[@christoshadjichristofi350]

Is it possible to add a 'table of contents' there too? so as i can press and go to the respective section? Awesome thought btw.

[@shopdat]

I'm looking to pull the trigger and adopt your system. This video was published a few months ago, what I your advice for me knowing what you know now. For a use case like yours is this the best path? Any pro tips if so?

[@KodapsAcademy]

The problem is that ContentLayer is no longer maintained, but there aren’t that many viable alternatives either :/

[@yearsten]

thank you so much

[@cjambrosi]

Excellent content!
Instead of using notion, is it possible to use Markdown files from a GitHub repository?

[@KodapsAcademy]

Notion is used to generate markdown files in the markdown repository, so yeah if you already have the files and don’t want to manage them in notion you can skip that part :)