Learn Next.js By Building a State-of-the-Art E-com in Fullstack React
Discover why Next.js has become one of the most popular tools for building modern React applications. Using a real-world e-commerce project, we’ll explore how to combine high performance, interactivity and full-stack development and build robust web applications faster than ever.
Learn Next.js By Building a State-of-the-Art E-com in Fullstack React
Description
In this practical workshop, software engineers will gain hands-on experience building a modern, high-performance e-commerce application using Next.js. The scenario with an e-com website covers both ends of the spectrum of needing high-performant static rendering and a dynamic interactive user experience.
Explore how Next.js addresses common web development challenges and why it has become a popular solution for building efficient and scalable React applications. Experience firsthand how Next.js empowers developers, from beginners to seasoned professionals, to quickly build and scale sophisticated websites and applications.
Target Audience
Web developers with React knowledge, who want to broaden their fullstack range and get up and running faster than with vanilla React.
Technologies
- Next.js
- React
- VS Code
Takeaways
Understand the upsides of Next.js over plain React. Inspiration to start web projects faster. Be able to build robust, modern fullstack web solutions.
Important Reminder
Computers needed, with Node.js and npm installed. Basic React knowledge needed, to focus on Next.js related topics.
Are you interested?
Schedule
09:00–10:00 – Next.js & the Server/Client Mental Model
- Next.js fundamentals and App Router
- Server Components vs. Client Components
- Rendering and execution on server vs. browser
- Hands-on: Create the initial e-commerce application
10:00–11:00 – Routing, Layouts & Navigation
- File-based routing and dynamic routes
- Shared layouts and navigation
- Client-side navigation and prefetching
- Hands-on: Build the product catalogue and product pages
11:00–11:15 – Break
11:15–12:15 – Server Components & Data Fetching
- Fetching and rendering data on the server
- Static vs. request-time rendering
- SEO and performance benefits
- Hands-on: Connect the application to an API and render product data
12:15–13:15 – Lunch
13:15–14:15 – Interactivity & Server Actions
- Client Components and React state
- When to use "use client"
- Server Actions and forms
- Hands-on: Build an interactive shopping cart
14:15–15:00 – Loading, Suspense & Streaming
- Loading states and Suspense
- Streaming server-rendered content
- Hands-on: Add loading UI and stream slower content
15:00–15:15 – Break
15:15–16:15 – Caching & Partial Prerendering
- Modern caching in Next.js
- Cached vs. dynamic content
- use cache and revalidation
- Partial Prerendering
- Hands-on: Combine cached and dynamic content on a product page
16:15–17:00 – Production Essentials & Final Review
- Image and client-side JavaScript optimization
- Error handling and Route Handlers
- Key production best practices
- Final review: Rendering, data fetching, Server Actions, caching, streaming and Partial Prerendering
Workshop Outcome
By the end of the workshop, participants will have built a functional e-commerce storefront in Next.js while gaining hands-on experience with modern rendering, data fetching, interactivity, caching and performance techniques.
Got interested? Register right now!
There are two options of attending workshops. You can register separately from the conference ticket (if you've already registered to the conference before), or you can register for both workshop and for the conference together.
Personal participation in the conference.
This is our best-selling ticket.
VAT not included
If you already have a Conference Ticket, you can add a workshop on request at the discounted price of 320 EUR.
Buy a standalone workshop