Skip to main content

Next.js Black Belt 🥋

Átila Fassina

Your instructor
Átila Fassina
Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

Workshop, 6×2h + Q&A • Tue & Wed, Nov 9–24 2021
09:00 – 11:30 AM PT (Pacific, US) • 18:00 – 20:30 CET (Europe)

With its flexibility and intuitive APIs, Next.js has taken the React ecosystem by assault. But as it is such a powerful tool, it can become confusing when developing non-trivial web applications.

You can get up and running with the generic setup — via various guides available — but often that is not enough. In this workshop, we will walk through the creation of a complex application with all bells and whistles. You know, the type of high-end production-grade web app which can make every stakeholder (and user - most importantly) happy and satisfied.

In the workshop we will cover everything from tooling to performance, and from UI straight up to security, so you are ready to take up your own after.

Are you ready for lots of hands-on exercises and a pace fast enough to keep you on your toes, but smooth enough to cover the concepts behind each used pattern? This workshop will take you beyond the general proof-of-concept app, to something that scales and is abstract enough to fit any use case — whilst meeting all best practices.

$400 .00 $500.00Register for this workshop →6 × 2h live sessions + Q&A. Nov 9–24.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

In this workshop, you’ll learn:

  • Jamstack and Serverless general concepts
  • Next.js fundamentals
  • Server-Side Rendering
  • Static Site Generation
  • Incremental Site Regeneration
  • State Management in complex React (Next.js) apps
  • Isolating state between different routes
  • Monorepo setup with Yarn
  • Internationalization
  • Basic Web Security with Content Security Policy (CSP)
  • Reporting CSP violations
  • Next.js Multi-Zones
  • Authentication with JWT and OAuth providers

Who is this workshop for?

This is a dense workshop addressed to everyone who is willing to take their React app to the next level. Regardless if you have created apps with Next.js, have experience only with React, or is curious to create high-end apps that scale without hurting: this course is for you!

What hardware/software do you need?

  • Node.js v12+
  • Yarn v1
  • Optional: Vercel account (if wish to deploy and integrate CI/CD)
  • Optional: TypeScript fundamentals (not neccessary, but we’re not covering how it works)
  • Optional: understanding of what Server Side Rendering means (we will glance through SSR concepts — throughout the course)

About Átila Fassina

Átila Fassina is on a mission to make code simple. When not recording screencasts or courses, you may find him either writing and talking about jamstack, performance, or developer tooling.

Currently, he works as Lead Frontend Engineer at Signavio, a SAP company and he writes for Smashing Magazine.

Time & Schedule

This workshop is split over six days. Our virtual doors open at 8:45, we start at 9 AM PDT. Please mark your calendars:

  • Tue, November 9, 09:00 – 11:30 AM PDT
  • Wed, November 10, 09:00 – 11:30 AM PDT
  • Tue, November 16, 09:00 – 11:30 AM PDT
  • Wed, November 17, 09:00 – 11:30 AM PDT
  • Tue, November 23, 09:00 – 11:30 AM PDT
  • Wed, November 24, 09:00 – 11:30 AM PDT

$400 .00 $500.00Register for this workshop →6 × 2h live sessions + Q&A. Nov 9–24.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

Day 1: Levelling and setup

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Theory

  • What is Jamstack, and how can serverless help me ship high quality products faster?
  • Highly performant apps with Next.js: Web Vitals overview
  • Styles: what to choose and how to use?

Practice

  • Day takeaway: Starter pack
    • Setup Github repository with Next.js and TypeScript
    • Setup continuous deployment with Vercel or Netlify with webhooks per commit

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Networking!

Day 2: Incremental Regeneration and i18n

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Theory

  • How Incremental Site Regeneration works, how to use it?
  • What Next.js brings in terms of internationalization and localization?

Practice

  • Setup default and secondary language routes
  • Day takeaway: create our own proof-of-concept type-safe translation library

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Networking!

Day 3: Serverless Function + Content Security Policy

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Theory

  • What is Content Security Policy (CSP) ?
  • How to evaluate a good CSP?

Practice

  • Day takeaway 1: Create your own CSP
  • Day takeway 2: API route to catch reports from CSP and send it to bug reporting tool

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Networking!

Day 4: Isolating state between routes

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Theory

  • How to use the <Layout> pattern to create the concept of children routes
  • State Management: useState + useContext vs Jotai

Practice

  • Day takeaway: setup Jotai in the application

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Networking!

Day 5: Multi-Zones, Monorepo

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Theory

  • What is a monorepository?
  • Why is it good?
  • What is Multi-Zones Next.js app?
  • The difference between Rewrite and Redirect

Practice

  • Day takeaway: a bare-bones monorepo with yarn workspace, 2 apps running under the same domain

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Networking!

Day 6: Q&A, challenge solution, scaling up

8:45 AM PDT
Virtual doors open, registration, chat, and introductions.

9:00 AM – 11:00 AM

Practice

  • Start with solving the previous day challenge

Theory

  • Improving the monorepo setup with lerna
  • Q&A, feedback, chat
  • Keeping in touch

11:00 AM – 11:30 AM
Q&A with Átila on the day’s material. Goodbye’s!

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

x