Next.js Black Belt 🥋
- 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! But you can join the waiting list in case a ticket becomes available:
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.
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
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! But you can join the waiting list in case a ticket becomes available: