Post Content
Learn how to build a website with Next.js 15 and Strapi 5. In this course you’ll learn to build a fully functional summer camp website from start to finish. Through hands-on practice, you’ll discover how to combine the power of Next.js’s server components with Strapi’s headless CMS capabilities, creating dynamic, content-rich websites that are both developer-friendly and client-manageable.
Project Repo Resources: https://github.com/PaulBratslavsky/freecodecamp-surfcamp-final
Strapi Docs: https://strapi.link/getting-started
Support for this channel comes from our friends at Scrimba – the coding platform that’s reinvented interactive learning: https://scrimba.com/freecodecamp
Contents
(0:00:00) Course introduction and project overview
(0:11:37) How to follow this course and local project setup
(0:15:59) Getting started with Next.js 15 and Strapi 5
(0:22:26) Section 1- Building the home page
(1:29:20) Section 2 – Building the experience page
(1:41:16) Section 3 – Building top navigation
(1:54:21) Section 4 – Building out the footer
(2:04:02) Section 5 – Building the blog page
(2:17:08) Section 6 – Form submission with server action
(2:41:23) Section 6.5 – How to structure our blog data in Strapi
(2:58:07) Section 7 – Custom data loading content list component
(3:14:41) Section 8 – Implementing search and pagination in Next.js
(3:45:48) Section 9 – Building a single blog detail page
(4:12:17) Section 10 Building the events page and form
(4:55:25) Conclusion
(4:57:03) Where to next?
(4:58:18) Interview with Niklas on styling and Figma Design
(5:22:06) Why use Next.js
(5:28:22) Setting up Next.js
(5:32:12) Routing
(5:36:20) Layout Page
(5:41:32) Links and Navigation
(5:44:30) Server and Client Components
(5:52:25) Data fetching
(5:59:34) Dynamic Routing
(6:11:44) Not Found Page
(6:16:26) Figma for developers
Thanks to our Champion and Sponsor supporters:
Drake Milly
Ulises Moralez
Goddard Tan
David MG
Matthew Springman
Claudio
Oscar R.
jedi-or-sith
Nattira Maneerat
Justin Hual
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news Read More freeCodeCamp.org
#programming #freecodecamp #learn #learncode #learncoding