How do I implement client-side fetching in Next.js?

How do I implement client-side fetching in Next.js?

You can use the useEffect hook along with fetch to retrieve data on the client side in Next.js.

Can you show me a code example?

Sure! Here's a simple example:

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

This will fetch data when the component mounts.

What if I need to handle loading states?

You can add a loading state by using another piece of state to track whether the data is being fetched. Here's an updated example:

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, []);

  return <div>{loading ? 'Loading...' : JSON.stringify(data)}</div>;
};