NEXT-JS PROJECT

REVIEW
In the course of two weeks I have gain skills needed to build a full-stack Next.js applications.On this project we were expected to build a full-stack web application which should have a public home page, login page, dashboard pages and setting up database.

REQUIREMENTS
. Operating system; MacOS, Windows or Linus
. Node.js 18.17.0
. Github account
. Vercel Account

CREATING PROJECT
After running some codes we navigate to dashboard which by navigating through it you will see the following folders;

/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. To save time, we've pre-styled these components for you.
/public: Contains all the static assets for your application, such as images.
Config Files: You'll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.

To run the development server we have to install pnpm i package and run it by pnpm dev command.

CSS STYLING
We also get to learn on how to add global CSS by importing code; import '@/app/Ui/global.css';

We have two ways of styling files, which are;

1. Taiwild- is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.
2. CSS Modules allow you to scope CSS to a component by automatically creating unique class names.

OPTIMIZING FONTS AND IMAGES
Next.js automatically optimizes fonts in the application when you use the next/font module. It downloads font files at build time and hosts them with your other static assets. This means when a user visits your application, there are no additional network requests for fonts which would impact performance.

CREATING LAYOUTS AND PAGES
This is how you can create different pages in Next.js: create a new route segment using a folder, and add a page file inside it.

By having a special name for page files, Next.js allows you to colocate UI components, test files, and other related code with your routes. Only the content inside the page file will be publicly accessible. For example, the /Ui and /lib folders are colocated inside the /app folder along with your routes.

NAVIGATING BETWEEN PAGES
In order to navigate through different pages, you can use the_Link_ Component to link between pages in your application.
link allows you to do client-side navigation with JavaScript.

SETTING UP DATABASE
Before you can continue working on your dashboard, you'll need some data. In order to get the data you need to follow the steps below;

1. Create a GitHub repository or use other Git provider like GitLab or Bitbucket. Then push your repository to GitHub.
2. Create a Vercel account- Visit vercel.com/signup to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts.
3. Connect and deploy your project and ensure you name it.
4. Create a postgres database- to set up a database, click Continue to Dashboard and select the Storage tab from your project dashboard. Select Connect Store → Create New → Postgres → Continue. Finally, run pnpm i @vercel/postgres in your terminal to install the Vercel Postgres SDK.
5. Seed your database- Inside of /app, there's a folder called seed. Uncomment this file. This folder contains a Next.js Route Handler, called route.ts, that will be used to seed your database. This creates a server-side endpoint that you can access in the browser to start populating your database.

FETCHING DATA
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.

For your dashboard project, you'll write database queries using the Vercel Postgres SDK and SQL.

STATIC AND DYNAMIC RENDERING
_ static rendering_- data fetching and rendering happens on the server at build time (when you deploy) or when revalidating data

There are a couple of benefits of static rendering:

1. Faster Websites - Prerendered content can be cached and globally distributed. This ensures that users around the world can access your website's content more quickly and reliably.
2. Reduced Server Load - Because the content is cached, your server does not have to dynamically generate content for each user request.
3. SEO - Prerendered content is easier for search engine crawlers to index, as the content is already available when the page loads. This can lead to improved search engine rankings.

_ dynamic rendering_ content is rendered on the server for each user at request time (when the user visits the page).

There are a couple of benefits of dynamic rendering:

1. Real-Time Data - Dynamic rendering allows your application to display real-time or frequently updated data.
2. User-Specific Content - It's easier to serve personalized content, such as dashboards or user profiles, and update the data based on user interaction.
3. Request Time Information - Dynamic rendering allows you to access information t hat can only be known at request time, such as cookies or the URL search parameters.

STREAMING
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.
There are two ways you implement streaming in Next.js:
At the page level, with the loading.tsx file.
For specific components, with .