DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on • Edited 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 "https://github.com/vercel/next-learn/tree/main/dashboard/starter-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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay