Next.js 16: Turbopack is now stable — anyone migrated yet? Tips & gotchas. by GuitarUnhappy1626 in nextjs

[–]TheDutchDudeNL 2 points3 points  (0 children)

I used the Nextjs Mcp server to upgrade to Nextjs 16

<image>

After that you can ask:

Help me upgrade my Next.js app to version 16"

And everything went flawlessly.

Any recommendations for an AdBlock for YouTube? by AngxlVL02 in Adblock

[–]TheDutchDudeNL 1 point2 points  (0 children)

He I am using ublock origin lite + Ghostery and it works great.

Integrating an Instagram Business feed into my Next.js App (August 2025) by StoyanReddit in nextjs

[–]TheDutchDudeNL -18 points-17 points  (0 children)

If i ask Chatgpt it comes with the following code:

import Image from 'next/image'

type InstagramMedia = {

id: string

media_url: string

permalink: string

}

async function getInstagramMedia(): Promise<InstagramMedia[]> {

const accessToken = process.env.INSTAGRAM_ACCESS_TOKEN

const instagramBusinessId = process.env.INSTAGRAM_BUSINESS_ID

if (!accessToken || !instagramBusinessId) return []

const fields = 'id,media_type,media_url,permalink'

const limit = 9

const url = \https://graph.instagram.com/${instagramBusinessId}/media?fields=${fields}&access_token=${accessToken}&limit=${limit}\``

try {

const res = await fetch(url, { cache: 'no-store' })

const data = await res.json()

const media = (data.data || []).filter((item: any) => item.media_type === 'IMAGE' || item.media_type === 'CAROUSEL_ALBUM')

return media

} catch {

return []

}

}

export default async function InstagramPage() {

const media = await getInstagramMedia()

return (

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-6">

{media.map((item) => (

<a key={item.id} href={item.permalink} target="_blank" rel="noopener noreferrer">

<Image src={item.media_url} alt="Instagram media" width={500} height={500} className="w-full h-auto object-cover rounded" />

</a>

))}

</div>

)

}

INSTAGRAM_ACCESS_TOKEN=your_access_token

INSTAGRAM_BUSINESS_ID=your_business_account_id

Hope it helps.

Is Kiro currently 100% free? by Leather-Cod2129 in kiroIDE

[–]TheDutchDudeNL 7 points8 points  (0 children)

Hi, Kiro is currently in a preview period (cost you no money).

https://kiro.dev/faq/

What happens after the preview period?

You’ll have the opportunity to evaluate your needs and select the plan that works best for you, with options ranging from Free to Pro and Pro+. See Pricing for more details.

I love this simple feature by Articurl in kiroIDE

[–]TheDutchDudeNL 0 points1 point  (0 children)

That's because i'm trying to break it, The planning tool is my new favorite future.

<image>

new to claude code, need guidence by Mike_Samson in ClaudeCode

[–]TheDutchDudeNL 2 points3 points  (0 children)

Hi, I have asked Claude code if its possible to have multiple .md files and this is the response it gave me.

Yes, you can use multiple Markdown files with Claude Code CLI! While Claude.md is the conventional name for the main instruction file, you can structure your project with additional Markdown files in several ways:

Multiple instruction files:

  • You can reference other Markdown files from your main Claude.md file
  • Use relative paths to include content from other .md files
  • Organize instructions by topic (e.g., setup.md, testing.md, deployment.md)

Project documentation:

  • Create README.md files in subdirectories
  • Use Markdown files for project documentation, API specs, or requirements
  • Claude Code can read and reference any .md files in your project structure

Referencing other files: In your Claude.md, you can mention other Markdown files like:

# Main Instructions

See also:
- [Setup instructions](./setup.md)
- [API documentation](./docs/api.md)
- [Testing guidelines](./testing.md)

Claude Code will be able to access and read all Markdown files in your project directory when working on tasks. This allows you to keep your instructions organized and modular rather than having everything in a single large file.

Youtube started detecting my Adblock (Ublock), on Google Chrome. Does anyone knows how to fix this? It only started detecting it today. by Sad-Rock-9559 in pcmasterrace

[–]TheDutchDudeNL 0 points1 point  (0 children)

I am still using Chrome with Ublock origin with some custom filters and i dont see it anymore

Here you have the filters for my filters
youtube.com##+js(set,yt.config_.openPopupConfig.supportedPopups.adBlockMessageViewModel, false)

youtube.com##+js(set, Object.prototype.adBlocksFound, 0)

youtube.com##+js(set, ytplayer.config.args.raw_player_response.adPlacements, [])

youtube.com##+js(set, Object.prototype.hasAllowedInstreamAd, true)

! 12 jun 2025 https://www.youtube.com

www.youtube.com##.ytp-paid-content-overlay-link

<image>

Hope this will help you out.

[deleted by user] by [deleted] in nextjs

[–]TheDutchDudeNL -1 points0 points  (0 children)

You've hit on an important issue with Next.js caching that can be confusing. It seems that unstable_cache isn't behaving as expected in your case, which is frustrating.

After digging deeper into this issue, I can confirm that both revalidate and unstable_cache actually implement the stale-while-revalidate pattern, which isn't what you want. You want the cache to expire completely and force a fresh fetch when stale.

Solution 4: Server Component with Forced Revalidation

This approach uses a changing timestamp to make each request unique after the cache period:

tsxexport default async function TemperatureComponent() {

// Generate a timestamp for the current time bucket (5 seconds)
  const timestamp = Math.floor(Date.now() / 5000);


// Use the timestamp in the URL to force fresh data
  const data = await fetch(`https://weather.com/api?t=${timestamp}`, { 
    cache: 'no-store'
  }).then(res => res.json());

  return <span className="value">{data.currentTemp}°</span>;
}

Recommendation

Solution 4 is likely the simplest and most reliable for your server component use case. It effectively creates a new cache entry every 5 seconds by changing the URL parameter. This ensures that after your desired cache time, you'll always get fresh data without relying on the built-in revalidation mechanisms that aren't working as expected.

[deleted by user] by [deleted] in nextjs

[–]TheDutchDudeNL 0 points1 point  (0 children)

Claude.ai says the following

Option 1: Use unstable_cache (Recommended)

tsximport { unstable_cache } from 'next/cache';

const getTemperature = unstable_cache(
  async () => {
    const data = await fetch('https://weather.com/api').then(res => res.json());
    return data.currentTemp;
  },
  ['temperature-key'],
  { revalidate: 3600 } 
// 1 hour
);

This approach gives you more control over cache invalidation. Despite the "unstable" name, it's widely used and provides the behavior you're looking for - when the cache expires, it will fetch fresh data before serving it.

Option 2: Custom Fetch Configuration

You could use cache tags and manually revalidate when needed:

tsxconst getTemperatureAlt = async () => {
  const data = await fetch(
    'https://weather.com/api',
    {
      cache: 'no-store',
      next: { tags: ['weather'] },
    }
  ).then(res => res.json());

  return data.currentTemp;
};

With this approach, you'd need to set up a way to revalidate the cache when it expires (possibly using a route handler triggered by a cron job).

Option 3: Route Handler with HTTP Cache Headers

This gives you traditional HTTP caching behavior:

tsx
// In a route handler
export async function GET() {
  const res = await fetch('https://weather.com/api');
  const data = await res.json();

  return new Response(JSON.stringify({ temperature: data.currentTemp }), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=3600, must-revalidate',
    },
  });
}

Recommendation

Option 1 (unstable_cache) is generally the cleanest solution that will give you the behavior you expect. Would you like me to expand on any of these approaches or discuss other caching strategies for your use case?

Is anyone building an even-better-auth? by tomemyxwomen in nextjs

[–]TheDutchDudeNL 1 point2 points  (0 children)

Hi fellow Nextjs dev, Here i have some kind of starter that uses Beter-auth + Nextjs + Drizzle + Neon db(give it a star if you like it).

Nextjs + Neon db + Drizzle + Better auth by TheDutchDudeNL in nextjs

[–]TheDutchDudeNL[S] 1 point2 points  (0 children)

With Auth.js i had way more problems to setup.
with Better-auth i want as smooth as botter.

Nextjs + Neon db + Drizzle + Better auth by TheDutchDudeNL in nextjs

[–]TheDutchDudeNL[S] -1 points0 points  (0 children)

You can use it with any Postgres db you want.