Web Development on Pratham Dupare

API Routes

Mon, 11 Mar 2024 00:00:00 +0000

Introduction

Next.js is a full-stack framework that enables you to develop both the frontend and backend seamlessly. In contrast to using Express.js for building the backend, where you might need to run a separate server on a different port, Next.js eliminates this need.

Next.js employs a file-based routing system, making it convenient and efficient.

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
 res.send("Hello World!");
});

app.listen(port, () => {
 console.log(`Example app listening on port ${port}`);
});

Note that in the traditional Express.js example, app.listen specifies the port to which it must listen, requiring it to be continuously running to handle requests.

Components and Optimisations

Fri, 08 Mar 2024 00:00:00 +0000

Introduction

Next.js comes with a variety of built-in optimizations designed to improve your application’s speed and Core Web Vitals .

Built-in Components

1. Images Component:

Utilizes the native <img> element.
Optimizes image performance by implementing lazy loading.
Automatically resizes images based on the device size for improved responsiveness.

//app/page.js
import Image from "next/image";

export default function Page() {
 return (
 <Image
 src="/profile.png"
 width={500}
 height={500}
 alt="Picture of the author"
 />
 );
}

The Image Component requires the following properties: src, width, height, and alt.

Server components and Client Components in Next.js

Wed, 06 Mar 2024 00:00:00 +0000

Server components

By default, Next.js uses Server Components. This makes server rendering possible without any configuration and you can opt into using Client Components when needed.

Reacr Server Components allow you to write UI that can be rendered and optionally cached on the server.

Why Server Rendering

There are a lot of benefits of server side rendering such as :

Data Fetching: Fetching data on the server improves performance by reducing client-side data retrieval time and the number of requests.

Introduction to Next.js

Tue, 05 Mar 2024 00:00:00 +0000

Introduction

What is Next.js?

Used by some of the world’s largest companies, Next.js enables you to create high-quality web applications with the power of React components.

Next.js serves as a React framework designed for developing full-stack web applications. By leveraging React Components for creating user interfaces, Next.js extends functionality and streamlines optimizations.

Beneath the surface, Next.js handles the abstraction and automatic configuration of essential React tooling, such as bundling and compiling. This empowers developers, whether working individually or within a team, to concentrate on application development rather than intricate configuration details.