Blitz.js - The Fullstack React Framework

Brandon Bayer

Hybrid Cloud Development with Next.js, AWS, and Tailwind

Nader Dabit

Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀

Andrew Hao

The New Next.js App Router

Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React

Lee Robinson

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

Scaling WordPress with Next.js

Colby Fayock

Killing BFFs with GraphQL and Next.js

Roy Derks

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

Building Blazing-Fast Websites with Next.js and Sanity.io

Nancy Du

Nx + Next.js = ❤

Adam L Barrett

Don't take it Personally, it is Personalization

Incremental Static Regeneration: Static Sites on Steroids

Facundo Giuliani

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Matteo Frana

SSR & SSG in NextJS

Nur Şah Ketene

Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands

How do Localise and Personalize Content with Sanity.io and Next.js

Simeon Griggs

Build Fullstack Apps in Record Time with Blitz.js

Simon Knott

E2E Tests for API – Saving Nerves and Hours

Valentin Kononov

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

William Lyon

How to Secure Your Node.js Containers on Kubernetes With Best Practices

Deepu K Sasidharan

High-performance Next.js

You don't want to Server-side Render your Next.js App

Managing Authentication in Next.js

Michele Riva

Using Feature Flags in Development

Jessica Cregg

Crash Course Into Multilingual Websites With next.JS and Headless Content

How to properly handle URL slug changes in Next.js

Ondrej Polesny

Large scale projects challenges (NextJS - Contentful)

Leonidas Mamais

Routing in React 18 and Beyond

Delba de Oliveira

Build a Headless WordPress App with Next.js and WPGraphQL

Kellen Mace

Making a Splash: The Story of a Toilet Map Migration

Oliver Barnwell

Crash Course into the Jamstack with Next.js & Storyblok

Arisa Fukuzaki

Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️

Ankita Kulkarni

The State of The State In The App Router

Jack Herrington

Next.js 13: Data Fetching Strategies

Alice De Mauro

Chakit Arora

You Don’t Know How to SSR

Emanuele Stoppa

Nataliya Ioffe

A Practical Guide for Migrating to Server Components

Fredrik Höglund

Content Security Policy with Next.js: Leveling Up your Website's Security

Shield Your Next.js App With a Content Security Policy

Lucas Estevão

DevOps.js

DevOps.js Conf 2024

A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.

React Advanced

React Advanced Conference 2023

Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

React Summit

React Summit 2023

Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.

React Summit 2022

Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

React Summit US

React Summit US 2023

In this talk, we'll explore the powerful security feature of Content Security Policy (CSP) and how it can be implemented in Next.js to bolster your website's defenses against common web attacks like Cross-Site Scripting (XSS) and data injection. We'll cover the basics of CSP, its benefits, and best practices for implementing it in Next.js.  Additionally, we'll share some tools to evaluate and test your policy. By the end of this talk, you'll have a solid understanding of how to level up your website's security with CSP and protect your users from the ever-present threats of the modern web.

Learn why you should care about Content Security Policy (CSP) and how to implement it in a Next.JS application to level up your security layer. Understand CSP basics, directives, and their role in thwarting web attacks. Moving on to Next.js, the session will delve into implementation details, covering the "nounce" hashes for inline scripts using middlewares and common strategy pitfalls. By the end of the session, participants will be equipped with the knowledge and skills to implement and evaluate a robust CSP policy in Next.js, leveraging its latest features from version 13, effectively safeguarding their web applications against online attacks.

NextJS 13.4 changed the game with the App Router and React Server components. The change to the state management model looks simple to start, but gets complex very quickly as you try to create the practical every-day user experiences that were straightforward in the pages model. We'll talk about the different state management models, how they work in the App Router, and how to decide which you should use.

React Advanced Conference 2022

The Great British Public Toilet Map is an open source, community driven project dedicated to helping people find toilets across the UK, with around 14,000 loos recorded and counting. In 2021 we took on the challenge of migrating the project from a SPA React app written in JavaScript to NextJS and Typescript. Together we'll discover why we decided it was time to migrate, the myriad technical challenges we faced along the way, how this work benefits our users, and the many exciting plans we have for the future.

Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.

"Personalization" is right now one of the hottest buzzwords in the development world. Marketers, developers, and content creators evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences. We will see code examples using some of the features introduced in Next.js 12, the newest version of the framework, and connecting to Storyblok, a Headless CMS that offers a real-time visual editor.

Next.js is a fantastic framework; it provides many unique features, helping you build any web application effortlessly. But when it comes to choosing the right rendering strategy for your pages, you may face a problem; how should I render them? Should I statically generate them at build time? Should I server-side render them at run-time? Well, the answer is surprising. server-side rendering is rarely the best option, and let's explore why (and how to solve this problem!)

NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.

i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.

TS Congress

TypeScript Congress 2022

If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website. Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022

DevOps.js Conf 2022

Learn security best practices for Kubernetes and especially for securing applications built with NodeJS running on Kubernetes. We will talk about securing the cluster, your Node.js containers, and more. We will also look at how to use OIDC to secure access to the clusters. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Galaxy

GraphQL Galaxy 2021

Modern frontend applications want to efficiently query data on page load and navigate, format the data with TypeScript, and cache data between repeat requests. Setting that all up on your own is a chore... but with Apollo and Next.js, you can set up your client to auto-generate TypeScript types, cache query results intelligently, and generally be a breeze to work with. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

TestJS Summit

TestJS Summit 2021

Having adequate test coverage means a lot for the good API. But what can make the whole life pathetic is endless mocking of data and functions for integration tests. Every time you've changed the code you need to fix the mock. After several iterations the correct thought is - what's went wrong? Alternative approach is e2e tests for the API. Which require only minimal mocks and data preparation. The rest - pure code of your API. Change the code - e2e test remains the same.This talk is about my experience of switching from integration tests to e2e tests for the API, proc and cons and how I started to feel happy about tests. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Advanced Conference 2021

Frontend applications are getting more and more complicated, often delivering far more than just a UI. With this growing complexity comes a growing need for knowledge from the developers creating it, as they have to deal with matters like state-management, authorization, routing and more. In this talk, I'll show you how to use GraphQL in your Next.js application to create a data layer for your application, that exists between your frontend and your backend. In this data layer, you can handle complex matters to help you to keep your frontend application clean and "stupid".

Static sites are great. They are fast, cheap, secure, and easy to maintain. But generating static assets is a process that takes more and more time while our site gets bigger. We will talk about ISR, a feature that Next.js framework offers us to generate static pages at runtime. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland

React Finland 2021

In this talk we are going to have a look on how to use Server-Side-Rendering and Static-Site-Generation in NextJS to serve pages. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz.

Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. Together they bring order to the chaos of building multiple web applications across many teams. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition

React Summit Remote Edition 2021

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

In 2019, our frontend engineers were asking hard questions about the future of our frontend build system. As new engineering teams continued to spin up new frontend microservices, our custom-built platform grew increasingly fragmented. This led to more headaches for our teams, who were struggling to keep up with maintenance patches and security updates. What could we do to get ourselves out of this mess? Come join us as we discuss how we built a new platform with Next.js at its core to solve the challenges we faced. With the momentum of the Next.js community, we were able to extend this framework with a unique plugin architecture that allowed our engineers to hot-swap new packages and tools while allowing us to upgrade entire swaths of the stack at once. At the same time, we've multiplied the productivity (and happiness) of every frontend engineer at Lyft. We'll end with some great things to share that can be taken with you to address the challenges you face scaling your own frontend platforms! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites. In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel. By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

React Day Berlin

React Day Berlin 2022

- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself! - In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok. Prerequisites- <a href="https://code.visualstudio.com/">Any Text . Visual Studio Code recommended</a>- <a href="https://nodejs.org/en/download/">Node.js LTS</a>- <a href="https://yarnpkg.com/">NPM or Yarn</a>- <a href="https://github.com/">GitHub account</a>- <a href="https://vercel.com/">Vercel account</a>- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel

On this crash course, we'll create a new project in the headless CMS, fill it with data, and use the content to build a multilingual Next.js app. We'll spend a lot of time in code to:- Generate strongly typed models and structure for the content- Set up the site for multiple languages- Use respective language codes in content fetching and incorporate language fallbacks- Resolve multilingual content from rich text fields You will learn:- How to work with content from headless CMS (Kontent.ai)- How content model can be leveraged to generate TS types and what benefits it brings to your project- How to add multilingual capabilities to Next.js website- How to use language fallbacks- What are the typical gotchas when working with multilingual content

Ensuring your code is ready for production without enabling your features to your entire user base used to involve a lot of guesswork. By using feature flags, we can allow our development teams to preview work-in-progress features and unreleased functionality in production without redeploying our code. In this workshop, we’ll run through the fundamentals of feature flagging on both the client and server sides. We’ll cover working with LaunchDarkly’s SDKs within the context of a React application with a node backend, flagging at different places in the stack and give an introduction to rule targeting in the platform.

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Node Congress

Node Congress 2022

Next.js is a compelling framework that makes many tasks effortless providing many out-of-the-box solutions. But when it comes to authentication and user security, it's our mission to make it reliable, secure, and efficient. In this workshop, we'll focus on different user authentication and session management approaches, starting from a custom authentication strategy (that we will build together), and ending learning how to identify and integrate the right auth provider (Auth0, Firebase, etc.) for any app. Table of contents:- A brief introduction to Next.js- Building an authentication mechanism from scratch- Why we should avoid custom authentication- How to identify the proper authentication mechanism and provider- Integrating NextAuth.js, Auth0, Firebase, or any other provider <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura. Table of contents: - Next.js overview and getting started with Next.js - API Routes with Next.js &amp; building a GraphQL API - Using the Neo4j GraphQL Library - Working with Apollo Client and GraphQL data fetching in Next.js - Deploying with Vercel and Neo4j Aura <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs! Simon will introduce all the important parts &amp; guide you through getting started with Blitz, so you'll know if you might want to use it or not. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Jamstack frameworks are changing the way we build top-of-the-line experiences on the web. They are performant, secure and enable developers to build web apps faster than before. In this workshop, Nick DeJesus will walk you through what it's like to build an e-commerce site using NextJS, use-shopping-cart and theme-ui. You will learn how serverless functions with Netlify to help you make secure transactions and how to build accessible UI components that extend use-shopping-cart's abilities. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

You'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.   <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#next.js