
Axios is an HTTP library that makes it easy to send HTTP requests and handle responses in web applications. It provides a simple and intuitive API to perform common HTTP operations like **GET**, **POST**, **PUT** and **DELETE**.

Axios can be easily configured to work with a wide range of REST/GraphQL APIs.

## Get Started with Axios

You can install Axios in your project using npm and yarn.

```js
# using npm
npm install axios

# using yarn
yarn add axios
```

## Make HTTP Request (GET)

We can use Axios to request API endpoints with different HTTP methods like GET, POST, PUT etc.

```js
import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/posts";

axios
  .get(url)
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
```

## Make HTTP Request (GET) with params and headers

```js
import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/posts";

axios
  .get(url, {
    params: {
      id: 1,
    },
    headers: {
      "x-access-token": "token-value",
    },
  })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
```

And this is also equivalent:

```js
axios.get("https://jsonplaceholder.typicode.com/posts/?id=1");
```

## Make HTTP Request (POST)

Axios can take an object as its second parameter. This object is the request body that we send along the API call.

```js
import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/posts";
axios
  .post(url, {
    title: "New Post",
    body: "This is a New post",
  })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
```

## Make HTTP Request (POST) with headers

```js
import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/posts";
axios
  .post(
    url,
    {
      title: "New Post",
      body: "This is a New post",
    },
    {
      headers: {
        "x-access-token": "token-value",
      },
    }
  )
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
```

## Make HTTP Requet (PUT)

Axios PUT requests are HTTP requests that Updates a specific attributes in our case post with the post ID of 1.

```js
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts/1';
axios
    .put(url, {
        title: 'New Post',
        body: 'This is a New post',
    })
    .then((res) => res.json())
    .then((data) => console.log('Post Updated Successfully')
    .catch((err) => console.log(err))
```

## Make HTTP Requet (PUT) with headers

```js
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts/1';
axios
    .put(url,
    {
        title: 'New Post',
        body: 'This is a New post',
    },
    {
      headers: {
        "x-access-token": "token-value",
      },
    }
    )
    .then((res) => res.json())
    .then((data) => console.log('Post Updated Successfully')
    .catch((err) => console.log(err))
```

## Make HTTP Requet (DELETE)

Axios DELETE requests are HTTP requests that delete a specific Post identified by a URL.

```js
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts/1';
axios
    .delete(url)
    .then((res) => res.json())
    .then((data) => console.log('Post Deleted Successfully')
    .catch((err) => console.log(err))
```

## Make HTTP Requet (DELETE) with headers

```js
import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts/1';
axios
    .delete(url, {
      headers: {
        "x-access-token": "token-value",
      },
    })
    .then((res) => res.json())
    .then((data) => console.log('Post Deleted Successfully')
    .catch((err) => console.log(err))
```

Learn more about it [here](https://axios-http.com/docs/intro).


What is Axios ?



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


## File Based Routing

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

Learn more about it [here](https://nextjs.org/docs).

Hello my name is Abhishek

FeaturedPost

What is Axios ?

Getting started with next js