How do I fetch data in Next.js using Axios?

How do I fetch data in Next.js using Axios?

You can use Axios to fetch data in Next.js by making API calls in your components or using getServerSideProps.

Can you show me an example of using getServerSideProps with Axios?

Sure! Here's a simple example:

import axios from 'axios';

export async function getServerSideProps() {
  const res = await axios.get('https://api.example.com/data');
  const data = res.data;

  return { props: { data } };
}

const MyComponent = ({ data }) => {
  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

What if I want to fetch data on the client side instead?

You can fetch data on the client side using the useEffect hook. Here's an example:

import { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get('https://api.example.com/data');
      setData(res.data);
    };
    fetchData();
  }, []);

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;