The New Next.js App Router

Rate this content
Bookmark

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.

Lee Robinson
Lee Robinson
27 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Next.js App Router

Short description:

Today, I'm gonna be doing something a little different because my talk will be entirely in VS Code. I'm Lee and I work at Vercel and I lead the Next.js community. We recently released something called the Next.js App Router. Today, I'm gonna be walking through a demo of what the App Router looks like. Next.js has evolved a lot over the years. It was originally released in 2016 and it had a certain way of building. I'm gonna talk about the journey through a real application of how we landed on the App Router today. The core of Next.js is routing. We released Next.js in 2016 with file system-based routing. This is what Next.js was built on six years ago. We're going to be building an internal app dashboard that shows a list of invoices and has some settings pages with layouts. Let's start scaffolding out this page a little bit more. We'll use the home layout for the nav bar and invoices. This is the shell of our homepage.

Today, I'm gonna be doing something a little different because my talk will be entirely in VS Code. Woo! So, like she said, I'm Lee and I work at Vercel and I lead the Next.js community. If you haven't heard of Next.js, it's a React framework. And we recently released something called the Next.js App Router. Has anyone heard of the App Router? OK, that's more hands than I expected, that's awesome.

So for those who haven't, what I'm gonna be walking through today is a demo of what the App Router looks like. So the premise of this talk is called Next.js Metamorphosis. And the name for that is because Next.js has evolved a lot over the years. It was originally released in 2016 and it had a certain way of building. And I'm gonna talk about the journey through a real application of how we landed on the App Router today.

So what I have here is my editor on the left running a Next.js application and then my browser. And the first thing we're gonna start off with is the core of Next.js, which is routing. We released Next.js in 2016. We said we love file system-based routing. We wanted to make it as easy as possible for you to get started. Just drop a file in a folder and it will create a new route. So I have pages slash index.tsx here. So if I do export default function home page and I say return React summit and save. We see React Summit. This is all it takes to get your first route up and available on your local server or in production and this is what Next.js was built on six years ago.

Now what we're going to be building today is kind of an internal app dashboard that shows a list of invoices, it's got some settings pages that have some layouts and we'll get into more some of the advantages of some of the new things we've been using. So let's start scaffolding out this page a little bit more. So rather than returning a string here, let's return some layout component and we'll see if my VS code is not giving me my helpful auto-completes, but that's okay. We can manually type things out. That's fine. We'll do import layout for components and I have two different layouts from application. We have a home layout so we'll use that one here. There we go. Okay, so we have a nav bar that's going to be shared throughout our application and then we have my invoices. So this is kind of the shell of our homepage.

2. Adding Components and Fetching Remote Data

Short description:

Now let's add some components like cards and tables to display statistics about our account. We'll fetch remote data using the get initial props API and pass it to our React components. This API runs on the server and on page transitions. To improve this, the API was split into two separate functions: getinitialprops and get server side props.

Now inside of here, we also want to have some components and display some UIs. So let's do some cards that are going to display some statistics about our account, maybe how much money is in our account, what the invoices are and then we'll also do, oh, there we go, it's coming back, it's trying to help me out a little bit here. Components slash table, let me just manually import the card as well too, import card from components card.

I scaffolded out some UI components for us to use ahead of time. Cards, cards, okay, cool. So we have some cards that don't have any data right now. And then we have a table with some static data.

The core of Next.js is built on React, allows you to compose components but very frequently you need to actually fetch some remote data and pass it to your components. So the first API that Next.js released to do this back in 2016 was called get initial props. So let's use that to actually fetch some data and put it on the page. So I'll say homepage.getinitialprops and this is gonna be an async function that we want to fetch some data from. So we'll do cons data equals await get card data. And then we're gonna return that data to the page. So let's see. Nope, I'll type it out myself because oh, there we go. Okay. From our library from our database, I'm gonna import this function get card data that's gonna return some JSON here, we're gonna return that data from this function, and that gets forwarded to our React component. So inside of our React component, I have props so I can de-structure out data here. And we'll just throw on some any type here. Gotta love that. And then down below on our cards component, we can forward along that data by passing props. So I'll do data here and I'll hit save. We have data on our page. Woo! Love it. This works. And we're able to fetch remote data, but it does come with some tradeoffs or some things that maybe are not obvious. So this runs on the server, but it also runs on page transitions. So this first API left some room for improvement for us to clarify how you would actually import and use these functions for fetching remote data. So the metamorphosis of this, the next evolution of this API was breaking this into two separate guys. So export async function get server side props, and okay, cool.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
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.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai

Workshops on related topic

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