Get Started!

Hello World!

Welcome to Learn Modern Web Development with Next.js. This course provides a deep dive into the technical aspects of Next.js 13, one of the most popular and innovative frameworks in the modern web development ecosystem.

Presented by Kawtar CHOUBARI (opens in a new tab)

What we will learn

This course is structured to provide a comprehensive overview of Next.js's core features, including:

  • Client Components & Server Components - Discover the difference and how to utilize both.
  • Advanced Routing Features - Delve into layouts, error handling, loading UIs, and more.
  • Data Fetching Techniques - Understand the best practices for both client and server data fetching.
  • Route Handlers, Suspense, Async/Await - Master these essential asynchronous tools for web development.
  • Env Variables - Manage and maintain your environment-specific variables securely.
  • Next.js Built-in Modules - Leverage next/image, next/font, next/link, and more for a smoother development experience.

Coupled with TypeScript and TailwindCSS, you'll not only learn to build with Next.js but also to write scalable, maintainable, and stylish web applications.

You will find in the left menu the curriculum of this course, where each chapter contains informative details while helping you practice them by building an awesome app and adding progressively cool features to it.

Core Curriculum

  • Get Started! - Kickstart your Next.js journey.
  • Why Next.js? - Understand the advantages and reasons for choosing Next.js.
  • Setup - Get your development environment ready for the hands-on projects.
  • Module 1: Routing - Dive deep into the core concept of routing in Next.js.
  • Module 2: Data Fetching - Learn strategies for data fetching, both on the client and server.
  • Module 3: Performance - Techniques to optimize your application for the best user experience.
  • Module 4: SEO - Make your Next.js applications SEO-friendly with built-in and extended features.
  • Module 5: Deployment - Push your projects live with best practices in deployment.
  • Extras: Style your Components! - Integrate your visual designs using TailwindCSS and other style solutions.
  • What's Next? - Explore more features and add-ons to expand your Next.js applications.

If you faced any challenges and for further assistance, always refer back to Kawtar CHOUBARI, personally at the workshop lab, or via Twitter (X) (opens in a new tab).

Let's jump in and explore the world of Next.js together!

Why Next.js?