Theo's Typesafe Cult•2y ago

Any Clerk gurus in here? Following the Next.js 13 getting started guide renders blank screen

Following the getting started with nextjs guide for clerk renders a completely blank screen. I've followed it to a T, can't even set it up lmao. What am I doing wrong here? If I can't follow the getting started successfully then..... .env.local configuered with NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY src/app/page.tsx

//app/page.tsx
import { UserButton } from "@clerk/nextjs";

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

//app/page.tsx
import { UserButton } from "@clerk/nextjs";

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

./middleware.ts

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

export default authMiddleware();

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

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

export default authMiddleware();

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

src/app/layout.tsx

import "./globals.css";
import { Inter } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  );
}

import "./globals.css";
import { Inter } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  );
}

8 Replies

m$OP•2y ago

Repo for reproduction can be easily created if needed @James Perkins if I can get a royal pardon for pinging you (if this gets me banned, so be it), can you provide some assistance? We're trying to determine whether clerk is a good fit for a client project at work, and getting stumped at the first hurdle is a poohheh

adding the two folders for sign-in and sign-up with the correct pages, im now hitting Error: Clerk: auth() was called but it looks like you aren't using authMiddleware in your middleware file. Please use authMiddleware and make sure your middleware matcher is configured correctly and it matches this route or page. despite middleware.ts being in the ROOT of the project After moving the middleware.ts file between src/app and src the error remains. thinkies

James Perkins•2y ago

ban him! Get the ban hammer out. Now it’s cool. Can you give me a repo?

m$OP•2y ago

https://github.com/JamesIde/clerk-next13-app-dir-woes

GitHub

GitHub - JamesIde/clerk-next13-app-dir-woes

Contribute to JamesIde/clerk-next13-app-dir-woes development by creating an account on GitHub.

m$OP•2y ago

thanks @James Perkins, gotta bounce as its late here... will have a squiz in the morning at the docs again to see if ive missed anything i made some changes to the folder structure as I was completely doing it wrong, but middleware problem remains... signin/up should be in correct place now

James Perkins•2y ago

Here is the PR 🙂 https://github.com/JamesIde/clerk-next13-app-dir-woes/pull/1

GitHub

Fixes Clerk by perkinsjr · Pull Request #1 · JamesIde/clerk-next13-...

Puts middleware in the correct place src/ which is the root in a project when using the src directory. I also added UserButton and a auth() to the page so you can see the entire flow.

James Perkins•2y ago

middleware was in the wrong place should of been in src which is the root if you select that. I also added a userbutton and auth() so you can see it all work.

m$OP•2y ago

Incredible... and also embarrassing i didnt realise the correct location Thanks a lot!

James Perkins•2y ago

anytime 👍

Gaming

Programming

Any Clerk gurus in here? Following the Next.js 13 getting started guide renders blank screen