К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
The Freelance Stack: Real project with NextJS and Strapi · LearnSpace
Назад в каталог
courseraПрограммирование

The Freelance Stack: Real project with NextJS and Strapi

Курс от Packt
Средний≈ 18.5 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Embark on a hands-on journey through modern web development with this practical course on building freelance-ready applications using NextJS and Strapi. You'll gain a solid understanding of full-stack development, from creating dynamic pages to deploying production-ready applications. Starting with foundational skills in NextJS, you'll explore layout components, routing, data fetching, and dynamic rendering. You'll then integrate Strapi to manage content types and render content-rich pages like blogs and event signups. Along the way, you'll enhance your UI using Figma and Sass for efficient styling. As the course progresses, you’ll create a fully customizable blog and event platform, mastering features like reusable components, dynamic zones, and newsletter integrations. The course concludes with a step-by-step guide to deploying your app using Heroku and AWS S3. This course is ideal for freelance developers, aspiring full-stack engineers, or anyone looking to create scalable web applications. Learners should have basic knowledge of JavaScript and React. The course is best suited for intermediate-level developers.

Навыки, которые вы освоите

Content Management SystemsUI ComponentsAmazon S3Application DeploymentFront-End Web DevelopmentJavaScript FrameworksCode ReusabilityContent ManagementFigma (Design Software)User Interface (UI) DesignReact.jsServer SideNode.JSCloud Deployment

Программа курса

11 модулей · 109 учебных материалов

01Introduction4 материалов

Introduction

Course IntroВидеоFull Course ResourcesЧтениеWhat is the Freelance Stack?ВидеоHow to go through this courseВидео
02NextJS Crash Course11 материалов

Учитесь у экспертов

Packt - Course Instructors

Преподаватель курса

The Freelance Stack: Real project with NextJS and Strapi
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 18.5 ч

11 модулей

Язык: Английский

Субтитры: Казахский

Часть программы вашего университета

NextJS Crash Course

Why are we using NextJS?ВидеоSetting up a NextJS ProjectВидеоSimple Routing in NextJSВидеоLayouting in NextJSВидеоLinking from Page to PageВидеоServer and Client Components OverviewВидеоData FetchingВидеоDynamic RoutingВидеоNot Found PagesВидеоUnderstanding Next.js BasicsDIALOGUENextJS Crash Course - AssessmentЗадание
03Developer Intro To Figma3 материалов

Developer Intro To Figma

What is Figma and how to use itВидеоIntegrating Figma with Next.js DevelopmentDIALOGUEDeveloper Intro To Figma - AssessmentЗадание
04Initial Project Setup NextJS, Strapi, and Sass7 материалов

Initial Project Setup NextJS, Strapi, and Sass

NextJS Base SetupВидеоStyling Video: Sass SetupВидеоStyling Video: Variables and TypographyВидеоOverview of our setup (and why we set it up this way)ВидеоStrapi Installation and OverviewВидеоSetting Up a Next.js Project with SASSDIALOGUEInitial Project Setup NextJS, Strapi, and Sass - AssessmentЗадание
05Landing Page & Experience Page with Layout Components12 материалов

Landing Page & Experience Page with Layout Components

Header JSX StructureВидеоStyling: HeaderВидеоFooter JSX StructureВидеоStyling: FooterВидеоHero Section JSX StructureВидеоStyling: Hero SectionВидеоInfoBlocks JSX StructureВидеоStyling: InfoBlocksВидеоExperience Page: Reuse created Hero Section and InfoblocksВидеоStyling: Adjust Header colour per pathВидеоBuilding a Header and Footer in Next.jsDIALOGUELanding Page & Experience Page with Layout Components - AssessmentЗадание
06Connecting our Frontend to Strapi9 материалов

Connecting our Frontend to Strapi

Creating InfoBlock Content Type on StrapiВидеоUse Single Content Type in Strapi to create InfoBlocks per pageВидеоFetch InfoBlock Data on StrapiВидеоFetch Data from Strapi and process itВидеоRender InfoBlocks on pageВидеоCreate Button from InfoBlock Strapi Data on pageВидеоRender InfoBlocks on Experience pageВидеоCreating and Using Content Types in Strapi with a React FrontendDIALOGUEConnecting our Frontend to Strapi - AssessmentЗадание
07Main Page of the Blog9 материалов

Main Page of the Blog

Highlight Article JSX StructureВидеоStyling: Highlight ArticleВидеоSubscribe To Newsletter JSX StructureВидеоStyling: Subscribe to Newsletter ComponentВидеоFunctionality Subscribe to Newsletter ComponentВидеоFeatured Items Component JSX StructureВидеоStyling Featured Items ComponentВидеоCreating a Highlight Article Component in ReactDIALOGUEMain Page of the Blog - AssessmentЗадание
08Implement Blog on Frontend through Strapi and NextJS6 материалов

Implement Blog on Frontend through Strapi and NextJS

Create blog article type on StrapiВидеоInput blog article data on StrapiВидеоRender articles from Strapi data on main page of the blogВидеоCreate dynamic routes for all blog articlesВидеоCreating Content Types in StrapiDIALOGUEImplement Blog on Frontend through Strapi and NextJS - AssessmentЗадание
09Create Fully Customisable Blog Article21 материалов

Create Fully Customisable Blog Article

Create dynamic zone in Strapi for customisable blog contentВидеоCreating data for highlight articleВидеоArticle Hero Section JSXВидеоStyling: Article Hero SectionВидеоArticle Intro Component JSXВидеоStyling: Article Intro ComponentВидеоGeneric Article Component to render different component depending on Strapi dataВидеоArticle Headline JSXВидеоStyling: Article HeadlineВидеоText with Image Component JSXВидеоStyling: Text with Image ComponentВидеоArticle Paragraph JSXВидеоStyling: Article ParagraphВидеоImage Component JSXВидеоStyling: Image ComponentВидеоOther Articles Section on Individual Blog PageВидеоBlog Section Homepage JSXВидеоStyling: Blog Section HomepageВидеоFix Article Item for Featured Items on HomepageВидеоIntegrating Dynamic Blog ComponentsDIALOGUECreate Fully Customisable Blog Article - AssessmentЗадание
10Events Section - Create Signup Functionality for Offered Surfcamps & Events17 материалов

Events Section - Create Signup Functionality for Offered Surfcamps & Events

Post Requests in Strapi with the Newsletter SignupВидеоHook up Frontend to Signup Component in StrapiВидеоStrapi Participant and Event Content TypeВидеоFeeding Data into Strapi for all eventsВидеоSignup Form JSXВидеоStyling: Signup FormВидеоSignup Form Functionality: Sending data to Strapi from main events pageВидеоPregenerate individual event pagesВидеоEvent Data ProcessingВидеоRender individual event page based off Strapi dataВидеоSign up for specific eventВидеоFetch and filter upcoming events with a string query from StrapiВидеоAdjust featured items component for individual event pageВидеоStyling: FeaturedItem Component adjusted for eventВидеоFetch more events on individual event page & THANK YOUВидеоImplementing a Generic Signup System with StrapiDIALOGUEEvents Section - Create Signup Functionality for Offered Surfcamps & Events - AssessmentЗадание
11Deployment to Heroku10 материалов

Deployment to Heroku

Deployment OverviewВидеоDeploy Strapi Server to HerokuВидеоDifference between Production Strapi and Local DevelopmentВидеоMigrate local database from SQLite to Postgres to the production databaseВидеоHandle Image Uploads in Production with AWS S3ВидеоReplace image paths in production db to use AWS S3 bucket imagesВидеоDeployment of NextJS Frontend to HerokuВидеоDeployment to Heroku - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание