Learn Next.js By Building a State-of-the-Art E-com in Fullstack React
Zjistěte, proč se Next.js stal jedním z nejpopulárnějších nástrojů pro tvorbu moderních React aplikací. Na reálném e-commerce projektu si ukážeme, jak spojit špičkový výkon, interaktivitu a full-stack vývoj a jak díky Next.js vytvářet robustní webové aplikace rychleji než kdy dřív.
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.
Máte zájem?
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.
Zaujala Vás nabídka? Registrujte se ihned!
Existují dvě možnosti účasti na workshopech. Můžete se registrovat odděleně od vstupenky na konferenci (pokud jste se již na konferenci registrovali dříve), nebo se můžete registrovat na workshop i na konferenci dohromady.
Osobní účast na konferenci.
Jedná se o náš nejprodávanější lístek.
Cena bez DPH
Pokud už máte Conference Ticket, můžete si na vyžádání workshop dokoupit za zvýhodněnou cenu 320 EUR.
Koupit samostatný workshop