Introduction
Next.js is a React framework that offers an optimized development experience for building modern web applications. It provides features like server-side rendering (SSR), static site generation (SSG), API routes, and more, allowing developers to build performant and scalable application.
TECH STACK USED WHEN DOING IT
Fronted: next
Backend: NodeJS
Database: Postgres
Deployment: Vercel (Vercel linked with GitHub)
CREATING A NEW PROJECT
i recommend using pnpm as your package manager, as it's faster and more efficient than npm or yarn. If you don't have pnpm installed, you can install it globally by running:
`npm install -g pnpm`
To create a Next.js app, open your terminal, cd into the folder you'd like to keep your project, and run the following command
`npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm`
After installation, open the project in your code editor and navigate to nextjs-dashboard.
`cd nextjs-dashboard`
KEY FEATURES OF NEXTJS
THE LOGIN PAGE
This section will guide you through building a login page in Next.js with a basic form for user input and client-side state management. This example assumes you are handling authentication via API routes and a backend service.to add authenticate to access the next page we use NextAuth. We install the NextAuth.js by running the following commands in your terminal;
`pnpm i next-auth@beta`
Next, generate a secret code for your application, you can do this by running the following commands in your terminal;
`openssl rand -base64 32`
Then in your .env file, add your generated key to the AUTH_SECRET VARIABLE:
`AUTH_SECRET=your-secret-key`
THE DASHBOARD
In this section, we'll build a basic dashboard in Next.js. This dashboard will include a protected route that ensures only authenticated users can access it. For simplicity, this example assumes that user authentication is handled with session-based authentication using API routes.
PAGES FOUND IN THE DASHBOARD
1. HOME PAGE
A home page serves as the landing page of your application, offering users an overview of the content or services you provide. In this guide, we'll create a simple yet effective home page using Next.js. This page will include a navigation bar, a hero section, and some content sections to give users a glimpse of what the site offers.
2. THE INVOICE PAGE
An invoice page typically displays a list of items or services along with quantities, prices, and totals. In this guide, we will create a simple invoice page in Next.js, which includes an invoice list and summary. This example assumes static data for simplicity, but you can easily adapt it to fetch data from an API.
3. THE CUSTOMER PAGE
A customer page typically displays a list of customers along with relevant details like name, email, and contact information. This guide will walk you through creating a customer page in Next.js that fetches and displays customer data, and optionally allows actions like adding or deleting customers.
WHAT I LEARNED
- Learnt on how to create a Postgres database by creating new postgres then nevigated to the .env.local tab to show the secret and copied the snippet which is as follows;
POSTGRES_URL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:yrq8tQa2bUDn@ep-rough-silence-a42bmnk3.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-rough-silence-a42bmnk3-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="yrq8tQa2bUDn"
POSTGRES_DATABASE="verceldb"
Top comments (0)