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
Top comments (0)