Building a Summer Camp Website with Strapi 5 and Next.js 15

Overview

Coursera Plus Monthly Sale: All Certificates & Courses 40% Off!

Grab it

Build a fully functional summer camp website from start to finish in this comprehensive 6-hour course focused on combining Next.js 15's server components with Strapi 5's headless CMS capabilities. Master essential web development skills through hands-on practice, starting with project setup and progressing through building key components like the home page, experience page, navigation, and footer. Learn advanced features including form submissions with server actions, custom data loading, search implementation, and pagination. Explore crucial concepts such as blog data structuring in Strapi, dynamic routing, and server/client components. Gain practical insights through an interview on styling and Figma design, while accessing complete project resources via the provided GitHub repository. Perfect for developers seeking to create dynamic, content-rich websites that are both developer-friendly and easily manageable by clients.

Syllabus

⌨️ 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