Next.js practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice NextJS Introduction by building one step of an SEO-optimized blog layout and checking the result.

code-writing

beginnerNextJS Introduction

1. Start from the NextJS Introduction lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice App Router Basics by building one step of an SEO-optimized blog layout and checking the result.

code-fix

beginnerApp Router Basics

1. Start from the App Router Basics lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Routing and Pages by building one step of an SEO-optimized blog layout and checking the result.

output

beginnerRouting and Pages

1. Start from the Routing and Pages lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Nested Layouts by building one step of an SEO-optimized blog layout and checking the result.

fill-blank

beginnerNested Layouts

1. Start from the Nested Layouts lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice Dynamic Routes by building one step of an SEO-optimized blog layout and checking the result.

true-false

beginnerDynamic Routes

1. Start from the Dynamic Routes lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Linking and Navigating by building one step of an SEO-optimized blog layout and checking the result.

mini-project

beginnerLinking and Navigating

1. Start from the Linking and Navigating lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Server Components by building one step of an SEO-optimized blog layout and checking the result.

mcq

beginnerServer Components

1. Start from the Server Components lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Client Components by building one step of an SEO-optimized blog layout and checking the result.

code-writing

beginnerClient Components

1. Start from the Client Components lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Data Fetching by building one step of an SEO-optimized blog layout and checking the result.

code-fix

beginnerData Fetching

1. Start from the Data Fetching lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice Server Actions by building one step of an SEO-optimized blog layout and checking the result.

output

beginnerServer Actions

1. Start from the Server Actions lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Caching by building one step of an SEO-optimized blog layout and checking the result.

fill-blank

intermediateCaching

1. Start from the Caching lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Static Site Generation by building one step of an SEO-optimized blog layout and checking the result.

true-false

intermediateStatic Site Generation

1. Start from the Static Site Generation lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Server Side Rendering by building one step of an SEO-optimized blog layout and checking the result.

mini-project

intermediateServer Side Rendering

1. Start from the Server Side Rendering lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Incremental Static Regeneration by building one step of an SEO-optimized blog layout and checking the result.

mcq

intermediateIncremental Static Regeneration

1. Start from the Incremental Static Regeneration lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Route Handlers by building one step of an SEO-optimized blog layout and checking the result.

code-writing

intermediateRoute Handlers

1. Start from the Route Handlers lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Middleware by building one step of an SEO-optimized blog layout and checking the result.

code-fix

intermediateMiddleware

1. Start from the Middleware lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice SEO and Metadata by building one step of an SEO-optimized blog layout and checking the result.

output

intermediateSEO and Metadata

1. Start from the SEO and Metadata lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Optimizing Images by building one step of an SEO-optimized blog layout and checking the result.

fill-blank

intermediateOptimizing Images

1. Start from the Optimizing Images lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Optimizing Fonts by building one step of an SEO-optimized blog layout and checking the result.

true-false

intermediateOptimizing Fonts

1. Start from the Optimizing Fonts lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Scripts and Styles by building one step of an SEO-optimized blog layout and checking the result.

mini-project

intermediateScripts and Styles

1. Start from the Scripts and Styles lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Forms and Validation by building one step of an SEO-optimized blog layout and checking the result.

mcq

advancedForms and Validation

1. Start from the Forms and Validation lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Error Handling by building one step of an SEO-optimized blog layout and checking the result.

code-writing

advancedError Handling

1. Start from the Error Handling lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Loading and Suspense by building one step of an SEO-optimized blog layout and checking the result.

code-fix

advancedLoading and Suspense

1. Start from the Loading and Suspense lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Authentication Basics by building one step of an SEO-optimized blog layout and checking the result.

output

advancedAuthentication Basics

1. Start from the Authentication Basics lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice NextAuth Integration by building one step of an SEO-optimized blog layout and checking the result.

fill-blank

advancedNextAuth Integration

1. Start from the NextAuth Integration lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice State Management by building one step of an SEO-optimized blog layout and checking the result.

true-false

advancedState Management

1. Start from the State Management lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Internationalization by building one step of an SEO-optimized blog layout and checking the result.

mini-project

advancedInternationalization

1. Start from the Internationalization lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Testing NextJS by building one step of an SEO-optimized blog layout and checking the result.

mcq

advancedTesting NextJS

1. Start from the Testing NextJS lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Deployment on Vercel by building one step of an SEO-optimized blog layout and checking the result.

code-writing

advancedDeployment on Vercel

1. Start from the Deployment on Vercel lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice NextJS Review by building one step of an SEO-optimized blog layout and checking the result.

code-fix

advancedNextJS Review

1. Start from the NextJS Review lesson example.

2. Use dynamic params, static paths and search queries instead of placeholder text.

3. Run the example and compare output before polishing.