YutaMoriJP

// Update globs depending on your framework
---
name: tailwind_v4
description: Guide for using Tailwind CSS v4 instead of v3.x
globs: ["**/*.{js,ts,jsx,tsx,mdx,css}"]
tags:
  - tailwind
  - css
---

YutaMoriJP

"use client";

import { cache, unstable_postpone } from "react";
import { preload } from "react-dom";

const loadImage = cache((src: string) => {
  return new Promise<void>((resolve, reject) => {
    const img = new Image();
    img.src = src;

YutaMoriJP

// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

function useLinkHandler() {
  let router = useRouter();

  useEffect(() => {
    let onClick = e => {

YutaMoriJP

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Building