How to fix Next.JS Error: only absolute urls are supported?

In Next.JS, One common issue we encounter is that "only absolute URLs are supported" when making HTTP requests or navigating to routes within the next.js application. only absolute URLs are supported" this error occurs when a function is expecting a absolute URL (one that includes the protocol and domain) for communication rather, it got a absolute URL then this error is thrown.

There are different approaches that can be used to fix this error:

Fetching Data from API

When using fetch or axios to make HTTP requests, you need to provide an absolute URL.

// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
    const [data, setData] = useState(null);

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

    return (
        <div>
            <h1>Data</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

Using axios

• If you prefer using axios, the setup is similar:

// pages/index.js
import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Home() {
    const [data, setData] = useState(null);

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

    return (
        <div>
            <h1>Data</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

Navigating Between Routes

Using next.js routing programmatically with next/link or next/router ensure you are using proper absolute or relative URLs depending on the context.

Using next/link

• When linking to internal routes, next/link works with relative URLs:

// pages/index.js
import Link from 'next/link';
export default function Home() {
    return (
        <div>
            <h1>Home Page</h1>
            <Link href="/https/www.geeksforgeeks.org/about">
                <a>Go to About Page</a>
            </Link>
        </div>
    );
}

Using next/router

• When programmatically navigating, next/router can handle both absolute and relative URLs.
• Use relative URLs for internal navigation:

// pages/index.js
import { useRouter } from 'next/router';

export default function Home() {
    const router = useRouter();

    const navigateToAbout = () => {
        router.push('/about'); // Relative URL
    };

    return (
        <div>
            <h1>Home Page</h1>
            <button onClick={navigateToAbout}>Go to About Page</button>
        </div>
    );
}

Handling API Routes in Next.js

If you’re making requests to internal API routes, use relative URLs for client-side requests and absolute URLs for server-side requests.

Client-Side Requests

For client-side requests, use relative URLs:

// pages/index.js
import { useEffect, useState } from 'react';
export default function Home() {
    const [data, setData] = useState(null);

    useEffect(() => {
        async function fetchData() {
            const res = await fetch('/api/data'); // Relative URL
            const json = await res.json();
            setData(json);
        }
        fetchData();
    }, []);

    return (
        <div>
            <h1>Data</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

Server-Side Requests

For server-side requests, use absolute URLs, especially if you're making requests to external APIs:

// pages/api/data.js
export default async function handler(req, res) {
 // Absolute URL
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    res.status(200).json(data);
}

Conclusion

"only absolute URLs are supported" This error in Next.JS can be solved by ensuring the usage of the absolute URL(one that includes the protocol and domain) for API usage avoiding the relative URLs. This relative URLs are used within the nexts.js application but when dealing with outer server we must ensure using the absolute URLs as shown as the above steps. This ensures the error doesn't occur when dealing with axios or HTTP requests.