Open3

Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024) 躓きポイント

naughtytadatakanaughtytadataka

import { useDebounce } from "usehooks-ts";
を使用すると、
Module '"usehooks-ts"' has no exported member 'useDebounce'.
とエラーが発生する。
今は使い方が変わっているようで、正しくは
import { useDebounceValue } from "usehooks-ts";
使う側は、
const [debouncedValue, setDebouncedValue] = useDebounceValue(value, 500);

naughtytadatakanaughtytadataka

2:09:22で以下のエラーが出た場合

Unhandled Runtime Error
Error: 
Clerk: The <CreateOrganization/> component is not configured correctly. The most likely reasons for this error are:

1. The "/" route is not a catch-all route.
It is recommended to convert this route to a catch-all route, eg: "//[[...rest]]/page.tsx". Alternatively, you can update the <CreateOrganization/> component to use hash-based routing by setting the "routing" prop to "hash".

2. The <CreateOrganization/> component is mounted in a catch-all route, but all routes under "/" are protected by the middleware.
To resolve this, ensure that the middleware does not protect the catch-all route or any of its children. If you are using the "createRouteMatcher" helper, consider adding "(.*)" to the end of the route pattern, eg: "/(.*)". For more information, see: https://clerk.com/docs/references/nextjs/clerk-middleware#create-route-matcher

Call Stack
error
node_modules\@clerk\nextjs\dist\esm\client-boundary\hooks\useEnforceCatchAllRoute.js (22:1)
check
node_modules\@clerk\nextjs\dist\esm\client-boundary\hooks\useEnforceCatchAllRoute.js (51:1)

CreateOrganizationタグを以下のように修正
<CreateOrganization routing="hash" />

naughtytadatakanaughtytadataka

ルートパスでのredirectがうまくいかないとき

import {
    clerkMiddleware,
    createRouteMatcher
} from '@clerk/nextjs/server';

const isProtectedRoute = createRouteMatcher([
    '/(.*)',
    '/',
]);

export default clerkMiddleware((auth, req) => {
    if (isProtectedRoute(req)) auth().protect();
});

export const config = {
    matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

middleware.tsをこれにしてもいけます。