
One of the most exciting discoveries in my NextJS journey was realizing I could build **API endpoints** right inside my NextJS application. No need for a separate Express server!

## What Are API Routes?

API Routes let you create serverless API endpoints as part of your NextJS app. Any file inside `pages/api` becomes an API endpoint.

For example, `pages/api/hello.js` maps to `/api/hello`.

## Creating Your First API Route

Here's a simple API route that returns JSON data:

```js
// pages/api/posts.js

export default function handler(req, res) {
  const posts = [
    { id: 1, title: 'First Post' },
    { id: 2, title: 'Second Post' }
  ];

  res.status(200).json(posts);
}
```

You can now fetch from this endpoint in your frontend code:

```js
const response = await fetch('/api/posts');
const posts = await response.json();
```

## Handling Different HTTP Methods

You can handle different request methods in the same API route:

```js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Handle GET request
    res.status(200).json({ message: 'GET request' });
  } else if (req.method === 'POST') {
    // Handle POST request
    const data = req.body;
    res.status(201).json({ message: 'Created', data });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}
```

## Dynamic API Routes

Just like pages, API routes support dynamic parameters:

```js
// pages/api/posts/[id].js

export default function handler(req, res) {
  const { id } = req.query;
  
  // Fetch post by id from database
  const post = { id, title: 'Dynamic Post' };
  
  res.status(200).json(post);
}
```

This handles requests to `/api/posts/1`, `/api/posts/2`, etc.

## Real-World Use Cases

I've used API routes for:
- Form submissions and validation
- Authentication endpoints
- Database operations
- Third-party API integrations
- Webhook handlers

Having frontend and backend in **one project** simplifies development and deployment significantly!

Building API Routes in NextJS


Images often account for the majority of a webpage's size, and optimizing them can be tedious work. That's where NextJS really shines with its **built-in Image component**.

## The Problem with Regular Images

When I was building React apps, I'd just use regular `<img>` tags:

```js
<img src="/my-image.jpg" alt="Description" />
```

This seems fine, but there are hidden problems:
- Images aren't optimized for different screen sizes
- No lazy loading by default
- Large images slow down your page
- No modern format conversion (like WebP)

## The NextJS Image Component

NextJS provides an Image component that handles all of this automatically:

```js
import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/my-image.jpg"
      alt="Description"
      width={500}
      height={300}
      priority={false}
    />
  );
}
```

What happens behind the scenes is magical:
- Images are automatically served in modern formats like WebP
- Responsive images are generated for different screen sizes
- Lazy loading is enabled by default
- Images are optimized on-demand, not at build time

## Layout Options

You can control how images behave with different layout modes:

```js
// Fixed size
<Image src="/photo.jpg" width={500} height={300} />

// Responsive (maintains aspect ratio)
<Image src="/photo.jpg" layout="responsive" width={16} height={9} />

// Fill container
<Image src="/photo.jpg" layout="fill" objectFit="cover" />
```

Since I started using the Image component, my page load times have improved significantly, and I don't have to worry about manual image optimization anymore!

Image Optimization in NextJS


One of the biggest revelations in my NextJS journey was understanding how **server-side rendering** actually works and why it's so important.

Coming from a pure React background where everything renders on the client, NextJS opened my eyes to a better way.

## Why Server-Side Rendering Matters

When you build a traditional React app, the browser receives an almost empty HTML file with a JavaScript bundle. The content only appears after JavaScript executes. This means:

- Search engines might struggle to index your content
- Users see a blank page while JavaScript loads
- Initial page load feels slower

NextJS solves this by rendering your React components on the server **before** sending HTML to the browser.

## Using getServerSideProps

The `getServerSideProps` function runs on every request and lets you fetch data on the server:

```js
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }
  };
}

function Page({ data }) {
  return (
    <div>
      <h1>Server-Rendered Data</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default Page;
```

The page is fully rendered with data on the server, so users see content immediately!

## When to Use SSR

I've learned that SSR is perfect for:
- Pages with frequently changing data
- Content that needs to be indexed by search engines
- Pages where you need access to request-time information

However, for static content that doesn't change often, Static Site Generation (SSG) with `getStaticProps` is even better!

The flexibility to choose between SSR, SSG, or client-side rendering on a **per-page basis** is what makes NextJS so powerful.

Server-Side Rendering with NextJS


When I first started exploring NextJS, the routing system completely changed how I thought about navigation in React apps.

Unlike traditional React where you need to set up React Router and manually configure all your routes, NextJS uses a **file-based routing system** that feels incredibly natural.

## How File-Based Routing Works

Every file you create in the `pages` directory automatically becomes a route. It's that simple!

For example:
- `pages/index.js` → `/`
- `pages/about.js` → `/about`
- `pages/blog/index.js` → `/blog`

## Dynamic Routes

The real magic happens with dynamic routes. You can create dynamic segments by wrapping the filename in square brackets:

```js
// pages/posts/[id].js

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
}

export default Post;
```

This single file handles routes like `/posts/1`, `/posts/2`, or `/posts/getting-started` - whatever you need!

## Nested Routes

Creating nested routes is as easy as creating nested folders:

```
pages/
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug
    categories/
      [category].js → /blog/categories/:category
```

This structure makes your codebase **incredibly organized** and intuitive. You can see the entire routing structure just by looking at your file system.

The best part? No configuration files, no route definitions, just create a file and it works!

Understanding NextJS Routing System


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

... More content ...

Getting Started with NextJS


JavaScript powers the web - it's **the** most important programming language you need to know as a web developer.

For example, you should understand code like this:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```



All posts

Building API Routes in NextJS

Image Optimization in NextJS

Server-Side Rendering with NextJS

Understanding NextJS Routing System

Getting Started with NextJS

Mastering JavaScript