NEXT JS

The following are some of the charpters i learned,and did;
optimizing Fonts and Images;
Creating Layouts and Pages;
. Set Up Node.js
install node.js in your computer,next js requirs node.js version.
b. Create a New Next.js
create a new Next.js project quickly. Open your terminal or command prompt and run the following command
Navigating Between Pages;
Setting Up Your Database in vercel;
Executing queries;;
npx is a package runner tool that comes with Node.js.
create-next-app is a tool that sets up a new Next.js project with a default configuration.
my-nextjs-project is the name of the folder where your project will be created.
.API lAYER
APIs are an intermediary layer between your application code and database. There are a few cases where you might use an API:
• If you're using 3rd party services that provide an API.
• If you're fetching data from the client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client.
In Next.js, you can create API endpoints using Route Handlers.
Database queries
When you're creating a full-stack application, you'll also need to write logic to interact with your database. For relational databases
like Postgres, you can do this with SQL or with an ORM
.SETTING UP DATABASE IN VERCEL.
There are a few cases where you have to write database queries:
•
When creating your API endpoints, you need to write logic to interact with your database.

If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client.
when creating a postgres data base u should first create new postgres, Once connected, navigate to the .env.local tab, click Show secret and Copy Snippet. Make sure you reveal the secrets before copying them.the following is the secret after coppying the snippet;

`POSTGRES_URL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_PRISMA_URL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NO_SSL="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech:5432/verceldb"
POSTGRES_URL_NON_POOLING="postgres://default:FWuODZz9B5Td@ep-withered-recipe-a48czbnm.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_USER="default"
POSTGRES_HOST="ep-withered-recipe-a48czbnm-pooler.us-east-1.aws.neon.tech"
POSTGRES_PASSWORD="FWuODZz9B5Td"
POSTGRES_DATABASE="verceldb"`

HOW TO FETCH DATA
Using Server Components to fetch data
By default, Next.js applications use React Server Components. Fetching data with Server Components is a relatively new approach and there are a few benefits of using them:

Server Components support promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries.
Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client.

Server Components execute on the server, you can query the database directly without an additional API layer. In the case of data fetching, each request can only begin once the previous request has returned data.
Static and Dynamic Rendering

Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from the server to the client as they become ready.

By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user