Next.js
Beginner to Full-Stack Developer — Learn Next.js step by step from React fundamentals to routing, APIs, databases, authentication, authorization and production-ready applications.
130 lessons across 15 modules
Modules
1. React Prerequisites
11 lessonsLessons covering React Prerequisites in Next.js.
-
1. What is React?Start Lesson →
-
2. ComponentsStart Lesson →
-
3. JSXStart Lesson →
-
4. PropsStart Lesson →
-
5. StateStart Lesson →
-
6. EventsStart Lesson →
-
7. Conditional RenderingStart Lesson →
-
8. ListsStart Lesson →
-
10. useStateStart Lesson →
-
11. useEffectStart Lesson →
-
12. API CallsStart Lesson →
2. Introduction to Next.js
8 lessonsLessons covering Introduction to Next.js in Next.js.
-
1. What is Next.js?Start Lesson →
-
2. Why Next.js?Start Lesson →
-
3. React vs Next.jsStart Lesson →
-
4. Next.js Use CasesStart Lesson →
-
5. Creating a Next.js ApplicationStart Lesson →
-
6. Setup OptionsStart Lesson →
-
7. Development ServerStart Lesson →
-
8. Production BuildStart Lesson →
3. Project Structure
6 lessonsLessons covering Project Structure in Next.js.
-
1. app/Start Lesson →
-
2. components/Start Lesson →
-
3. lib/Start Lesson →
-
4. services/Start Lesson →
-
5. types/Start Lesson →
-
6. public/Start Lesson →
4. Routing
10 lessonsLessons covering Routing in Next.js.
-
1. App RouterStart Lesson →
-
2. PagesStart Lesson →
-
3. Nested RoutesStart Lesson →
-
4. Dynamic RoutesStart Lesson →
-
5. Route ParametersStart Lesson →
-
6. Query ParametersStart Lesson →
-
7. LinkStart Lesson →
-
8. NavigationStart Lesson →
-
9. RedirectStart Lesson →
-
10. Route GroupsStart Lesson →
5. Layouts
6 lessonsLessons covering Layouts in Next.js.
-
1. Root LayoutStart Lesson →
-
2. Nested LayoutStart Lesson →
-
3. NavbarStart Lesson →
-
4. SidebarStart Lesson →
-
5. Dashboard LayoutStart Lesson →
-
6. Shared ComponentsStart Lesson →
6. Server and Client Components
7 lessonsLessons covering Server and Client Components in Next.js.
-
1. Server ComponentsStart Lesson →
-
2. Client ComponentsStart Lesson →
-
3. "use client"Start Lesson →
-
4. When to use Client ComponentsStart Lesson →
-
5. Server-side data fetchingStart Lesson →
-
6. Client-side data fetchingStart Lesson →
-
7. Common mistakesStart Lesson →
7. UI Components
12 lessonsLessons covering UI Components in Next.js.
-
1. ButtonStart Lesson →
-
2. InputStart Lesson →
-
3. CardStart Lesson →
-
4. TableStart Lesson →
-
5. ModalStart Lesson →
-
6. AlertStart Lesson →
-
7. BadgeStart Lesson →
-
8. DropdownStart Lesson →
-
9. NavbarStart Lesson →
-
10. SidebarStart Lesson →
-
11. PaginationStart Lesson →
-
12. LoadingStart Lesson →
8. Forms
8 lessonsLessons covering Forms in Next.js.
-
1. FormsStart Lesson →
-
2. Input HandlingStart Lesson →
-
3. Form SubmissionStart Lesson →
-
4. ValidationStart Lesson →
-
5. Error MessagesStart Lesson →
-
6. Client ValidationStart Lesson →
-
7. Server ValidationStart Lesson →
-
8. Loading StateStart Lesson →
9. Next.js APIs
10 lessonsLessons covering Next.js APIs in Next.js.
-
1. Route HandlersStart Lesson →
-
2. GETStart Lesson →
-
3. POSTStart Lesson →
-
4. PUTStart Lesson →
-
5. PATCHStart Lesson →
-
6. DELETEStart Lesson →
-
7. RequestStart Lesson →
-
8. ResponseStart Lesson →
-
9. Status CodesStart Lesson →
-
10. API Error HandlingStart Lesson →
10. PostgreSQL and Prisma
12 lessonsLessons covering PostgreSQL and Prisma in Next.js.
-
1. Database ConnectionStart Lesson →
-
2. PostgreSQLStart Lesson →
-
3. PrismaStart Lesson →
-
4. Prisma SchemaStart Lesson →
-
5. ModelsStart Lesson →
-
6. MigrationStart Lesson →
-
7. Prisma ClientStart Lesson →
-
8. CRUDStart Lesson →
-
9. RelationsStart Lesson →
-
10. PaginationStart Lesson →
-
11. FilteringStart Lesson →
-
12. SearchingStart Lesson →
12. Role-Based Authorization
5 lessonsLessons covering Role-Based Authorization in Next.js.
-
1. RoleStart Lesson →
-
2. PermissionStart Lesson →
-
3. Protected RouteStart Lesson →
-
4. Protected APIStart Lesson →
-
5. Role-based UIStart Lesson →
13. Dashboard
8 lessonsLessons covering Dashboard in Next.js.
-
1. Dashboard LayoutStart Lesson →
-
2. NavbarStart Lesson →
-
3. SidebarStart Lesson →
-
4. CardsStart Lesson →
-
5. TablesStart Lesson →
-
6. ChartsStart Lesson →
-
7. NotificationsStart Lesson →
-
8. ProfileStart Lesson →
14. Advanced Next.js
11 lessonsLessons covering Advanced Next.js in Next.js.
-
1. Loading UIStart Lesson →
-
2. Error UIStart Lesson →
-
3. Not FoundStart Lesson →
-
4. MetadataStart Lesson →
-
5. ImagesStart Lesson →
-
6. FontsStart Lesson →
-
7. Static RenderingStart Lesson →
-
8. Dynamic RenderingStart Lesson →
-
9. CachingStart Lesson →
-
10. RevalidationStart Lesson →
-
11. PerformanceStart Lesson →
15. File Upload
6 lessonsLessons covering File Upload in Next.js.
-
1. File UploadStart Lesson →
-
2. Image UploadStart Lesson →
-
3. File ValidationStart Lesson →
-
4. File SizeStart Lesson →
-
5. StorageStart Lesson →
-
6. SecurityStart Lesson →
16. Production
10 lessonsLessons covering Production in Next.js.
-
1. Environment VariablesStart Lesson →
-
2. Development vs ProductionStart Lesson →
-
3. BuildStart Lesson →
-
4. StartStart Lesson →
-
5. GitStart Lesson →
-
6. GitHubStart Lesson →
-
7. DeploymentStart Lesson →
-
8. DomainStart Lesson →
-
9. SSLStart Lesson →
-
10. Production DatabaseStart Lesson →