I’m building an app with next.js. I’m currently working on the login page with the clerk. But I have a problem when i create it.

I have made code like this :

1. MyApp/.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_Y29oZXJlbnQtaW5zZWN0LTgyLmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_k44Z52oKaMkHSvQbIPGFJT0bcJUJgxgTyu8u8rlxdK
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

2. MyApp/middleware.ts

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

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

3.MyApp/app/(auth)/(route)/sign-in/[[…sign-in]]/page.tsx

import { SignIn } from "@clerk/nextjs";

export default function Page() {
  return <SignIn />;
}

4. MyApp/app/(auth)/(route)/sign-up/[[…sign-up]]/page.tsx

import { SignUp } from "@clerk/nextjs";

export default function Page() {
  return <SignUp />;
}

5. MyApp/(dashboard)/(routes)/page.tsx

import { UserButton } from "@clerk/nextjs"

export default function Home() {
  return (
    <div>
      <UserButton afterSignOutUrl="/" />
    </div>
  );
}

When I access http://localhost:3000/sign-in, I successfully enter the sign-in page. And also, when I access http://localhost:3000/sign-up, I successfully enter the sign-up page too. But when I access http://localhost:3000 I am not redirected to the sign in page. I dont know why does doesnt work.

I expect that when i access localhost:3000, i will redirected to sign up page.