#next.js

Subscribe
Next.js is a React-based web application framework that allows for server-side rendering, static site generation, and client-side rendering. It offers features such as automatic code splitting, serverless functions, and dynamic imports to improve website performance and scalability. Additionally, it provides an easy-to-use file-based routing system and supports a wide range of technologies and libraries.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
The New Next.js App Router
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Watch video: The New Next.js App Router
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Unveiling Next.js Secret Sauce on the Edge
React Summit 2024React Summit 2024
48 min
Unveiling Next.js Secret Sauce on the Edge
Workshop
Mustafa Azim
Mustafa Azim
Next.js on the Edge with its new secrets sauce for better user experience and high performance. We will unveil Next.js secret sauce and the way of working to deliver the best user experience in Edge network and the new features including partial pre-rendering. How to make use of the Server component and its high performance on Edge network.
Table of the contents:- Intro to the Edge network- Edge runtime in V8- Use cases of the edge functions- Deploy a service on the edge network
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Building Reusable Server Components in NextJS
React Summit US 2023React Summit US 2023
88 min
Building Reusable Server Components in NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies:
React, JavaScript/Typescript, NextJS, Miro
Content Security Policy with Next.js: Leveling Up your Website's Security
React Summit US 2023React Summit US 2023
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
Top Content
Watch video: Content Security Policy with Next.js: Leveling Up your Website's Security
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
From Todo App to B2B SaaS with Next.js and Clerk
React Summit US 2023React Summit US 2023
153 min
From Todo App to B2B SaaS with Next.js and Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.
Shield Your Next.js App With a Content Security Policy
React Advanced Conference 2023React Advanced Conference 2023
6 min
Shield Your Next.js App With a Content Security Policy
Watch video: Shield Your Next.js App With a Content Security Policy
Lucas Esteveau discusses the importance of Content Security Policy (CSP) as an additional layer of security for browsers. He explains how to validate and implement CSP using tools like csp-evaluator.withgoogle.com and observatory.mozilla.org. He also highlights the use of server components and middleware in the Hudafor project to set and enforce CSP directives. Lucas advises starting with a report-only CSP, reviewing the results, and gradually enforcing the policy. He emphasizes the importance of reviewing policy violation reports and iterating the process when making changes.
The State of The State In The App Router
React Advanced Conference 2023React Advanced Conference 2023
32 min
The State of The State In The App Router
Watch video: The State of The State In The App Router
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
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.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- 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
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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
Crash Course into the Jamstack with Next.js & Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
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- Any Text . Visual Studio Code recommended- Node.js LTS- NPM or Yarn- GitHub account- Vercel account- 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
Making a Splash: The Story of a Toilet Map Migration
React Advanced Conference 2022React Advanced Conference 2022
24 min
Making a Splash: The Story of a Toilet Map Migration
The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
React Advanced Conference 2022React Advanced Conference 2022
9 min
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.
Crash Course Into Multilingual Websites With next.JS and Headless Content
React Advanced Conference 2022React Advanced Conference 2022
126 min
Crash Course Into Multilingual Websites With next.JS and Headless Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
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
Using Feature Flags in Development
React Advanced Conference 2022React Advanced Conference 2022
72 min
Using Feature Flags in Development
WorkshopFree
Jessica Cregg
Jessica Cregg
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.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
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.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
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.
Don't take it Personally, it is Personalization
React Summit 2022React Summit 2022
22 min
Don't take it Personally, it is Personalization
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
You don't want to Server-side Render your Next.js App
React Summit 2022React Summit 2022
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
How to properly handle URL slug changes in Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
How to Secure Your Node.js Containers on Kubernetes With Best Practices
DevOps.js Conf 2022DevOps.js Conf 2022
34 min
How to Secure Your Node.js Containers on Kubernetes With Best Practices
Today's talk is about securing Kubernetes containers, especially for Node.js. The best practices for securing Kubernetes include using RBAC, OIDC, and secrets, as well as isolating workloads and securing container images. OADC is recommended for authentication in Kubernetes, and securing the Kubernetes cluster is crucial. Cloud-based Kubernetes clusters can utilize OADC or the default authentication mechanism provided by the cloud provider. Managing team size and dealing with different security philosophies are important considerations. Overall, securing Kubernetes is essential for protecting the infrastructure and data.
Managing Authentication in Next.js
Node Congress 2022Node Congress 2022
155 min
Managing Authentication in Next.js
Workshop
Michele Riva
Michele Riva
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
GraphQL + Apollo + Next.js: A Lovely Trio
GraphQL Galaxy 2021GraphQL Galaxy 2021
21 min
GraphQL + Apollo + Next.js: A Lovely Trio
This talk provides an overview of using GraphQL, Apollo, and Next.js together. It covers Next.js' data loading and routing capabilities, code generation with GraphQL, and generating TypeScript types. The talk also explores Apollo Client and its integration with GraphQL code generation. The speaker recommends checking out companion repositories and resources for more information.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
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 & 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
E2E Tests for API – Saving Nerves and Hours
TestJS Summit 2021TestJS Summit 2021
8 min
E2E Tests for API – Saving Nerves and Hours
This Talk discusses the use of end-to-end tests for API development, specifically using the Nest.js framework. The process of initializing the Nest API for testing is explained, along with customization options such as overriding authentication guards. The benefits of end-to-end tests are highlighted, including ease of modification and serving as additional documentation for the API. The challenges of writing the initial version of the test and a trick for mocking the date in tests are also mentioned.
Build Fullstack Apps in Record Time with Blitz.js
React Advanced Conference 2021React Advanced Conference 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Simon Knott
Simon Knott
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 & guide you through getting started with Blitz, so you'll know if you might want to use it or not.
Killing BFFs with GraphQL and Next.js
React Advanced Conference 2021React Advanced Conference 2021
21 min
Killing BFFs with GraphQL and Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.
Incremental Static Regeneration: Static Sites on Steroids
React Advanced Conference 2021React Advanced Conference 2021
22 min
Incremental Static Regeneration: Static Sites on Steroids
Incremental static regeneration is a feature in Next.js that allows for static generation on a per-page basis without rebuilding the entire site. It helps with headless content management systems and persists between deployments. The example demonstrates how server-side rendering, static site generation, and incremental static regeneration work together. The real-time visual editor allows for immediate changes to be seen. Visit the NetJS website for an e-commerce demo and learning platform.
How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced Conference 2021React Advanced Conference 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
SSR & SSG in NextJS
React Finland 2021React Finland 2021
27 min
SSR & SSG in NextJS
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.
Blitz.js - The Fullstack React Framework
React Summit 2020React Summit 2020
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
Nx + Next.js = ❤
React Summit 2020React Summit 2020
9 min
Nx + Next.js = ❤
Hey everybody, my name is Adam Ellibert, aka Big AB, and I am a core contributor on a project called NX. Today, I'm going to go through a whirlwind tour of a really cool way to do web development using NX. NX is a suite of dev tools to improve developer experience, and it's extensible, plugin-based, and open-source. I'll show you some of the commands that NX provides, such as creating an NX workspace, generating schematics, serving as a dev server, building applications, and running tests. NX also has a variety of plugins, including the Next.js plugin. And if you're not comfortable with command-line interfaces, there's a GUI available for you. I'm going to create an NX workspace and choose Next.js as my first application. Then I'll create another app called Uber for Star and add a dashboard page. I'll also create a shared components library and configure storybook for it. Finally, I'll use NxServe to serve my Uber 4 app. This setup includes a splash page, a dashboard page, and a design system using storybook. We've got shared components for our marketing website and Uber 4 app. We also have end-to-end directories for Cypress tests and jest for unit tests. Our Uber 4 app is similar to any other Next.js app with pages and a nested dashboard page. We import shared components by prefixing them with the org name and library name. NX handles dependencies, ensuring everyone is on the same version and allows scoping imports to the org. Computation caching optimizes test and build runs by caching results that are unaffected by code changes. NX brings easy application creation with consistent commands and shared library extraction. Generators save time and enforce best practices. NX provides modern tools like Cypress, Storybook, Prettier, ESLint, and Next.js. The Next.js plugin creates and configures Next.js applications, serving them in dev mode and building production-ready and static apps. Visit nx.dev for more information.
E-commerce on the Jamstack with NextJS and Netlify
React Summit Remote Edition 2021React Summit Remote Edition 2021
120 min
E-commerce on the Jamstack with NextJS and Netlify
Workshop
Nick DeJesus
Nick DeJesus
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.
Scaling WordPress with Next.js
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Scaling WordPress with Next.js
WordPress is still widely used, with over 800 million installs. The Jamstack is a modern approach to building static HTML websites that utilize JavaScript and APIs for dynamic content. Serving static HTML files is faster than server-based solutions like WordPress. Serving static files from storage or a CDN allows for infinite scalability. WordPress is a compelling option for nontechnical users due to its familiarity and thriving ecosystem.
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
React Summit Remote Edition 2021React Summit Remote Edition 2021
31 min
Next.js — The Hybrid Architecture (SSG/SSR) for Web Developer Modernization and Scaling React
Top Content
Today's Talk discussed the impact of Core Web Vitals on SEO and website performance. Strategies for improving Core Web Vitals include using Next.js, optimizing images and fonts, and measuring performance with tools like Google Lighthouse. The hybrid approach of Next.js allows for flexibility in rendering applications. Recent releases of Next.js have focused on performance improvements. Next.js Commerce offers an all-in-one starter kit for e-commerce. Vercel provides a tool for measuring real user experiences and identifying potential causes of performance issues.
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀
Lyft has developed a next-generation microservice platform called Lyft Service, built on Next.js. They use a plugin system to reuse code and keep their stack modern. The plugin system allows for easy packaging and delivery of application functionality. Lyft has a structured approach to migrations and versioning, ensuring seamless upgrades. The success of the platform is attributed to organizational and cultural processes, as well as buy-in from senior leadership.