Next.js - Overview

This article serves as a beginner-friendly guide and steps in working on Next.js.

Next.js is a flexible framework for building web applications. Rather it is a react framework built on top of Node.js.

Setting Up Your Next.js Project
To start a new Next.js project, you'll need to have Node.js installed on your machine.

Installation
On installation, open a terminal and run the following command to create a new Next.js project: npx create-next-app@latest my-nextjs-app
Next.js provides an already-written code that reflects real-world development for familiarization with existing codebases.
Once the installation is complete, navigate to the project directory and run the development server:
cd my-nextjs-app
npm run dev

Folder Structure
The typical Next.js project structure consists of several key folders:

• pages/: This folder contains the files that define your application's routes. Each file in this folder corresponds to a route.
• public/: This is where you can store static assets like images, fonts, and icons. Files here are accessible via URLs.
• styles/: This folder holds your global and component-specific styles. By default, it contains a global CSS file.
• components/: Reusable React components.
• api/: API routes, used for server-side functions (optional).

Nextjs is a preferred framework because it offers a variety of built-in features such as:

1. Automatic code splitting for faster page loads.- Next.js does code splitting automatically, so each page only loads what’s necessary for that page. Meaning that the code for other pages is not served initially.

2. Client-side routing with optimized prefetching.

   • It creates routes as files under pages and uses the built-in Link component to link to them. No routing libraries are required.
   • Whenever a Link component (Next.js version of <a> tag) appears in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. Thus, by the time the user clicks the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant.

3. An intuitive page-based routing system (with support for dynamic routes)

4. Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis. - Generates HTML for each page in advance, instead of having it done by client-side JavaScript.

5. If we do not need to pre-render data, we can also use a strategy called Client-side Rendering, which:

   1. Statically generates (pre-renders) parts of the page that do not require external data.
   2. When the page loads, fetches external data from the client using JavaScript and populates the remaining parts.

6. Built-in CSS and Sass support is available for any CSS-in-JS library.

7. Development environment with fast refresh support.

8. API routes to build API endpoints with serverless functions

9. Next.js has support for API Routes, which lets us easily create an API endpoint as a Node.js serverless function. We can do so by creating a function inside a pages/api directory.

10. Fully extendable.

Conclusion
Getting started with Next.js is straightforward, and the framework provides an excellent balance between flexibility and ease of use. Whether you're building a personal blog, a corporate website, or a complex web application, Next.js offers the tools and features to help you build scalable, performant apps quickly.

Here is an example of nextjs-dashboard\app\page.tsx dashboard code snippet: