Next.js Project Structure

Gain hands-on experience in creating a new Next.js app, and explore the purpose of each folder and file in the project’s default structure.

We'll cover the following

Default project structure

Now that we have some basic knowledge about Next.js use cases and the differences between client-side React and other frameworks, it’s time to look at the code. We’ll start by creating a new Next.js app and customizing its default webpack and Babel configurations. We’ll also see how to use TypeScript as the primary language for developing Next.js apps.

Default project structure

Getting started with Next.js is incredibly easy. The only system requirement is to have both Node.js and npm installed on our machine (or development environment). The Vercel team created and published the straightforward but powerful tool create-next-app for generating the boilerplate code for a basic Next.js app. The following command can be used to generate any application:

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy

Before We Begin

Exploring Next.js: A Brief Primer

Exploring Different Rendering Strategies

Next.js Basics and Built-In Components

Hands-On Next.js

Managing Local and Global States in Next.js

CSS and Built-In Styles Methods

Using UI Frameworks

Using a Custom Server

Testing Next.js

Working with SEO and Managing Performance

Different Deployment Platforms

Managing Authentication and User Sessions

Building an E-Commerce Website with Next.js and GraphCMS

Create a Real-Time Chat Application in Next.js

Wrapping Up

Next.js Project Structure

Default project structure