Getting Started with Next.js 13

Introducing Next.js 13

Next.js 13 brought a revolution with the App Router, which enables a more intuitive folder structure. In this article, we will learn how to get started and make use of the latest features.

Installation

The first step is to create a new project with:

npx create-next-app@latest my-app

Folder Structure

The App Router uses a different folder structure from the Pages Router. Every folder represents a route, and the page.tsx file is the page that gets displayed.

Server Components

One of the best features of Next.js 13 is Server Components, which run on the server and reduce the JavaScript bundle size on the client.