
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


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


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

Hi, I'm Devrath

Featured Posts

Building API Routes in NextJS

Server-Side Rendering with NextJS

Getting Started with NextJS