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

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

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

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Learn Next.js · LearnSpace
Назад в каталог
courseraПрограммирование

Learn Next.js

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

О курсе

Learn to build web apps with Next.js, the world's most popular full-stack framework. You'll cover routing, layouts, data fetching, optimizing assets, and more while building PrintForge, a site for 3D printing enthusiasts. Next.js is a powerful React framework for building modern web applications. It combines blazing performance, flexible data fetching, and built-in optimizations. With features including server-side rendering (SSR), static site generation (SSG), API routes, and dynamic routing, Next.js makes it easier than ever to create sleek, scalable, and high-performing apps, without the headache. As with all Scrimba courses, we’ll be getting very hands-on with the code as we build a project called PrintForge, a site for browsing and sharing STL files which are used in 3D printing. Later, you’ll turn PrintForge into a data-driven app by adding an SQLite database, seeding model and category data, reading from the database, and building dynamic browsing features such as category pages, search, sorting, pagination, and URL validation. Along the way, you'll implement filtering, searching, sorting, and dynamic routing to create a more interactive and scalable user experience. This course covers everything you need to get started with Next.js. Whether you're a front-end developer looking to expand your skill set or a fullstack developer aiming to streamline your workflow, this course will enable you to build high-performance web apps that users (and search engines) love.

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

Database DevelopmentDatabasesFront-End Web DevelopmentUI ComponentsDatabase ApplicationData StoreScalabilityWeb ApplicationsWeb DevelopmentSoftware DevelopmentQuery LanguagesBack-End Web DevelopmentWeb Design and DevelopmentInformation ArchitectureData AccessSoftware DesignFull-Stack Web DevelopmentJavaScript FrameworksWeb Development ToolsReact.js

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

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

01Getting Started with Next.js11 материалов

Getting Started with Next.js

Welcome to interactive lessons!PLUGINNext.js IntroPLUGINA Minimal Next.js SetupPLUGINChallenge: create a new Next.js app from scratch!PLUGIN

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

Bob Ziroll

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

Learn Next.js
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 10.7 ч

6 модулей

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

Часть программы вашего университета
Adding a new page to our sitePLUGIN
File-based routing in Next.jsPLUGIN
Understanding create-next-appPLUGIN
Running create-next-appPLUGIN
Scrimba's "Runner"PLUGIN
create-next-app files walkthroughPLUGIN
Getting Started with Next.js Graded AssignmentЗадание
02Building Your First App with Routing10 материалов

Building Your First App with Routing

PrintForge Challenge SetupPLUGINChallenge - PrintForge Home PagePLUGINChallenge - PrintForge About PagePLUGINNested RoutesPLUGINLayouts part 1PLUGINLayouts part 2PLUGINChallenge - Add Header to PrintForgePLUGINOptimizing FontsPLUGINOptimizing ImagesPLUGINBuilding Your First App with Routing Graded AssignmentЗадание
03Components, Links & Dynamic Pages9 материалов

Components, Links & Dynamic Pages

Links in Next.jsPLUGINChallenge - Add Links to NavbarPLUGINAside: TypeScript Organization in PrintForgePLUGINAside: Client vs. Server ComponentsPLUGINChallenge - Create the Models List PagePLUGINDynamic RoutesPLUGINModel Detail PagePLUGINComponents, Links & Dynamic Pages Graded AssignmentЗаданиеSection 1 RecapPLUGIN
04Rendering Strategies and more 25 материалов
Walking through refactorsPLUGINChallenge: add categories pagePLUGINAdd categories Nav BarPLUGINAside: usePathnamePLUGINQuick Link RefactorsPLUGINMore about client componentsPLUGINChallenge: Style Active LinkPLUGINEven More on Client ComponentsPLUGINChallenge: Style Categories LinkPLUGINChallenge: Category PagesPLUGINRendering Strategies IntroPLUGINRendering Strategies pt 2PLUGINRendering Strategies Pt. 3PLUGINCat Facts - SSG Pt. 1PLUGINCatFacts - Add FetchPLUGINCatFacts: Structured PlayPLUGINHTML Form Submissions are Navigation EventsPLUGINCatFacts - searchParams pt. 1PLUGINCat Facts - searchParams pt. 2PLUGINPrintForge - Search Bar using native formPLUGINNextJS Form ComponentPLUGINPrintForge - Upgrade to Next's Form ComponentPLUGINTiny Library Solo ProjectPLUGINSection 2 RecapPLUGINGraded AssignmentЗадание
05Making Data Flow50 материалов
Welcome to Section 3!PLUGINRebuilding the App ShellPLUGINStructuring the 3D Models SectionPLUGINAdding Dynamic Routes and Image OptimisationPLUGINIntroducing Data in Next.jsPLUGINSetting Up the PrintForge DatabasePLUGINSeeding the Models TablePLUGINSeeding the Categories TablePLUGINA Tiny SQLite Setup NotePLUGINReading Models from the DatabasePLUGINReading Categories from the DatabasePLUGINRendering Category Links from DataPLUGINWiring Database Models into the UIPLUGINMaking ModelCards DynamicPLUGINFiltering Data with SQL WHEREPLUGINBuilding a Dynamic Category PagePLUGINBuilding a Dynamic Single Model PagePLUGINMaking the Category Page Title DynamicPLUGINMaking the Dynamic Category Page TitlePLUGINFixing the “All” Category LinkPLUGINUnderstanding the Search Data FlowPLUGINUpgrading the SearchFormPLUGINReading searchParams from the URLPLUGINUpgrading getModels() for SearchPLUGINSearching by Name or DescriptionPLUGINPassing Search Through the UIPLUGINUnderstanding the Sorting Data FlowPLUGINSetting Up Sort ControlsPLUGINNavigating with usePathname and useRouterPLUGINStyling the Active SortButtonPLUGINSending Sort Params to the Data LayerPLUGINSorting Data with SQL ORDER BYPLUGINSorting Models within CategoriesPLUGINUpgrading getModels() for Category SortingPLUGINRefactoring getModels() to take an objectPLUGINCombining sort and search functionalityPLUGINAdding Route-Level Loading UIPLUGINUsing Multiple loading.tsx FilesPLUGINShowing Pending UI with useTransitionPLUGINCreating the Models Browser ComponentPLUGINSetting up the LoadingUI ComponentPLUGINDebugging the Missing Category Page TitlePLUGINTriggering Loading UI from SortButtonsPLUGINTriggering Loading UI from SearchFormPLUGINShowing a Not Found StatePLUGINHandling Non-existent Models and CategoriesPLUGINShowing a No Results Found StatePLUGINCheckpoint Challenge: Searching Within Categories, Part 1PLUGINCheckpoint Challenge: Searching Within Categories, Part 2PLUGINGraded AssignmentЗадание
06Pagination and UX25 материалов
Introducing PaginationPLUGINCreating Pagination Controls and ButtonsPLUGINUpdating the URL with a Page QueryPLUGINReading the Page Query on the ServerPLUGINLimiting Results with LIMIT and OFFSETPLUGINReturning One Page of ModelsPLUGINCounting Rows with COUNT()PLUGINCounting Total Matching ModelsPLUGINCalculating Total PagesPLUGINRendering the Right Number of Pagination ButtonsPLUGINStyling the Active Pagination ButtonPLUGINAdding Pagination to Category PagesPLUGINRefactoring modelsPerPagePLUGINRefactoring Query Param LogicPLUGINPolishing Edge Cases and UXPLUGINHandling Out-of-Bounds Page ParamsPLUGINHandling Invalid Page ParamsPLUGINHandling Invalid Sort ParamsPLUGINDebug the Redirect BugPLUGINApplying Edge Case Handling to Category PagesPLUGINFinal UX Polish Challenge PackPLUGINFinal Pagination ChallengePLUGINFinal Pagination ChallengePLUGINSection 3 OutroPLUGINGraded AssignmentЗадание