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.

Next.js Metamorphosis

Lee Robinson

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.

Routing in React 18 and Beyond

Delba de Oliveira

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.

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

Nancy Du

Nataliya Ioffe

- 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

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

Matteo Frana

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

Next.js 13: Data Fetching Strategies

Alice De Mauro

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

Crash Course into the Jamstack with Next.js & Storyblok

Arisa Fukuzaki

Chakit Arora

React Advanced

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.

Making a Splash: The Story of a Toilet Map Migration

Oliver Barnwell

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.

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

Ankita Kulkarni

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

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

Ondrej Polesny

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.

Using Feature Flags in Development

Jessica Cregg

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.

High-performance Next.js

Michele Riva

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.

Build a Headless WordPress App with Next.js and WPGraphQL

Kellen Mace

"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.

Don't take it Personally, it is Personalization

Facundo Giuliani

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!)

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

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.

Large scale projects challenges (NextJS - Contentful)

Leonidas Mamais

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.

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

Simeon Griggs

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

How to properly handle URL slug changes in Next.js

DevOps.js

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>

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

Deepu K Sasidharan

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>

Managing Authentication in Next.js

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>

GraphQL + Apollo + Next.js: A Lovely Trio

Josh Goldberg

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>

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

William Lyon

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>

E2E Tests for API – Saving Nerves and Hours

Valentin Kononov

React Advanced Conference 2021

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>

Build Fullstack Apps in Record Time with Blitz.js

Simon Knott

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".

Killing BFFs with GraphQL and Next.js

Roy Derks

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>

Incremental Static Regeneration: Static Sites on Steroids

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>

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

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>

SSR & SSG in NextJS

Nur Şah Ketene

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.

Blitz.js - The Fullstack React Framework

Brandon Bayer

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>

Nx + Next.js = ❤

Adam L Barrett

React Summit Remote Edition

React Summit Remote Edition 2021

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>

E-commerce on the Jamstack with NextJS and Netlify

Nick DeJesus

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>

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

Nader Dabit

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>

Scaling WordPress with Next.js

Colby Fayock

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

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>

#next.js