NextJS 13 Data Fetching – Fetch

const res = await fetch('https://example.com/api/data');
const data = await res.json();

The Problem:

How to set a custom base URL for the fetch method in Next.js 13?

The Solutions:

Solution 1: Use fetch() method

To fetch data from an endpoint using the native fetch() method, you can do the following:

// Fetch data with GET request
let data = await fetch('https://some-domain.com/api/');

// Fetch data with POST request
fetch("https://some-domain.com/api/", {
  method: "POST",
  body: JSON.stringify({
    your: data,
  }),
  headers: {
    "Content-Type": "application/json; charset=UTF-8",
  }
});

Solution 3: Using .env Files

You can use .env files to provide custom base URLs for your fetch method. This approach involves:

1. Creating a .env file with your custom base URL:

   NEXT_PUBLIC_BASE_URL=https://my-custom-base-url.com
   

2. Reading the base URL from the .env file in your components:

   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
   

3. Using the base URL in your fetch request:

   fetch(`${baseUrl}/api/data`)
       .then(res => res.json())
       .then(data => console.log(data));
   

This method allows you to specify different base URLs for development and production environments by using separate .env files for each environment.

Video Explanation:

The following video, titled "Next.js 13 Crash Course Tutorial #6 - Fetching & Revalidating Data ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

In this Next 13 tutorial series, you'll learn the basics of Next.js to make a simple project, using the new app router & server components.