Next.js Discord

Discord Forum

Seeking Help with Implementing On-Demand Revalidation in Next.js

Unanswered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
Hello everyone,

I hope you're all doing well. I'm currently working on a simple component in my Next.js project and I could really use some guidance on implementing the on-demand revalidation feature.

Here's the code snippet from my component:

import { directus } from "@/libraries/directus" import { readSingleton } from "@directus/sdk" export default async function HomeHero() { const { hero_title, hero_description } = await directus.request(readSingleton('homepage', { fields: ["hero_title", "hero_description"] })) return ( <section className={'mx-auto max-w-7xl p-6 lg:p-8'}> <div className="mx-auto max-w-2xl lg:max-w-none"> <div className="max-w-3xl"> <h1 className="text-5xl font-semibold text-neutral-950 [text-wrap:balance] sm:text-7xl font-heading"> {hero_title} </h1> <p className="mt-6 text-xl text-neutral-600"> {hero_description} </p> </div> </div> </section> ) }

In the Next.js documentation, I came across the on-demand revalidation feature, which is illustrated with the following example:

export default async function Page() { const res = await fetch('https://...', { next: { tags: ['collection'] } }) const data = await res.json() // ... }

However, my challenge is that I'm using a third-party library, and I'm not sure how to integrate this on-demand revalidation feature. I initially looked into configuring it by segment, but unfortunately, I couldn't find any documentation explaining how to handle tags in this context.

Is it possible to achieve on-demand revalidation with tags while using a third-party library like mine? I would greatly appreciate any insights or guidance you could provide to help me overcome this obstacle.

Thank you so much for your time and assistance!

Best regards,

2 Replies

NebelungOP
I just wanted to share a workaround I found for the issue I posted about earlier. Here's what I did:

I created a custom function called createDirectusInstanceWithNextTag in my @/libraries/directus module. This function allows me to create instances of directus with specific tag-based configurations.

Here's a simplified example of how I used it in my component:

import { createDirectusInstanceWithNextTag } from "@/libraries/directus";
import { readSingleton } from "@directus/sdk";

const directus = createDirectusInstanceWithNextTag('homepage');

export default async function HomeHero() {
    const { hero_title, hero_description } = await directus.request(readSingleton('homepage', { fields: ["hero_title", "hero_description"] }));

    return (
        <section className={'mx-auto max-w-7xl p-6 lg:p-8'}>
            {/* ... */}
        </section>
    );
}


By utilizing this approach, I was able to tailor the directus instance configuration for the specific needs of my component. This workaround allowed me to retrieve the necessary data with the desired next tag configuration.

I hope this explanation helps others who might encounter a similar issue or need to customize their directus instances based on specific tags.
import { createDirectus, rest, staticToken } from '@directus/sdk';

interface Homepage {
    id: string;
    hero_title: string;
    hero_description: string;
}

interface Schema {
    homepage: Homepage;
}

const createDirectusInstanceWithNextTag = (tag: string) => {
    const customRequestTransformer = async (options: RequestInit) => {
        const modifiedOptions = {
            ...options,
            next: { tags: [tag] }
        };

        return modifiedOptions;
    };

    const directusInstance = createDirectus<Schema>(process.env.DIRECTUS_URL as string)
        .with(rest({
            onRequest: customRequestTransformer
        }))
        .with(staticToken(process.env.DIRECTUS_STATIC_TOKEN as string));

    return directusInstance;
};

export { createDirectusInstanceWithNextTag }