DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on • Updated on

Next.js App Router Course

Getting Started

Here I am documenting the official Next.js App Router course covering the main features of Next.js by building a full-stack web application.

You can visit my GitHub repo here to follow along with me.

I am building a dashboard app that has:

  • A public home page.
  • A login page.
  • Dashboard pages that are protected by authentication.
  • The ability for users to add, edit, and delete invoices.
  • An accompanying database

Project requirements:

Create a new Next.js app by running this command in the terminal:

npx create-next-app@latest nextjs-dashboard --use-npm --example ""

This command uses create-next-app, a Command Line Interface tool that sets up a Next.js application.

Breakdown of the folder strucutre:

/app Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.

/app/lib Contains functions used in your application, such as reusable utility functions and data fetching functions.

/app/ui Contains all the UI components for your application, such as cards, tables, and forms.

/public Contains all the static assets for your application, such as images.

/scripts Contains a seeding script.

Config Files: Most of these files are created and pre-configured with create-next-app.

This project uses TypeScript to help pass the correct data to components and database.

In this project I am manually declaring the data types. For better type-safety, use Prisma, which automatically generates types based on your database schema.

Next.js automatically installs the necessary TypeScript packages and configuration Next.js also comes with a TypeScript plugin for your code editor, to help with auto-completion and type-safety.

Development server

Run npm i to install the project's packages.

Followed by npm run dev to start the development server.

This starts your Next.js development server on port 3000 at http://localhost:3000 in the browser.

Up next: CSS Styling

Top comments (0)