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.
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:
In the terminal, run the following command to create a new Next.js app:
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 for you.
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 when you start a new project using create-next-app.
This project uses TypeScript to ensure passing the correct data format to components or 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 detects if your project uses TypeScript and automatically installs the necessary 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. Let's check to see if it's working. Open http://localhost:3000 on your browser.
Up next: CSS Styling
Top comments (0)