しがないエンジニア頑張る

弱々だけどこの界隈でなんとか食らいついていきたい人

2024-06-01から1ヶ月間の記事一覧

failed to forward action response の対処

server actions を使ってたらこんなエラーが出た。 failed to forward action response TypeError: fetch failed export function middleware(request: NextRequest) { const requestHeaders = new Headers(request.headers); if (!!requestHeaders.get("nex…

shadcn/uiのコンポーネントをいい感じに拡張する

例えばButtonだとするとこんな感じ。 import { Button, ButtonProps} from "@/components/ui/button"; type Props = { children: ReactNode; isLoading: boolean; } & ButtonProps; export const LoadingButton = forwardRef<HTMLButtonElement, Props>({ children, isLoading, ...prop</htmlbuttonelement,>…

Next.js middlewareでreferrerを取得する

Server Component でどうしてもpathが取得したかった 一旦以下方法しかなさそうだったのでこれで対応した。。 [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname · Issue #43704 · vercel/next.js · GitHub

shadcn/uiでLinkButtonを作成する

Buttonな見た目でLinkの動作をさせたいって時はこんな感じで実装すると思います。 以下公式より引用 import Link from "next/link" import { Button } from "@/components/ui/button" export function ButtonAsChild() { return ( <Button asChild> <Link href="/login">Login</Link> </Button> ) } でもこれだとd…

Tailwind CSSで3点リーダーを順番で出すだけ

以下のアニメーションを定義しておき module.exports = { theme: { extend: { animation: { dots: 'dots 1s steps(4, end) infinite', }, keyframes: { dots: { '0%, 100%': { content: '""' }, '25%': { content: '"."' }, '50%': { content: '".."' }, '75…

tanstack table で ColumnDef の meta に型をつける

type MetaType = { hoge?: boolean; } export type TableColumnDef = ColumnDef<T> & { meta?: MetaType; } // Tanstack table を返すIFとする type Props<T> = { data: T[]; columns: TableColumnDef<T>[]; ... } これだけ。</t></t></t>