next.js 错误：找不到ClerkInstanceContext：在为nex tjs构建应用程序时出现此错误

ymzxtsji 于 9个月前发布在其他

关注(0)|答案(7)|浏览(95)

我一直在构建一个线程应用程序克隆与帮助的JS掌握yt通道.但我得到了这个错误的错误：ClerkInstanceContext未找到.
我尝试重新启动应用程序，替换代码。但没有任何变化。该怎么办？有人能帮我解决吗？

来源：https://stackoverflow.com/questions/76843283/error-clerkinstancecontext-not-found-got-this-error-while-building-app-for-n

7条答案

按热度按时间

k3bvogb11#

我也从JS Mastery构建了next.js 13 Threads应用程序，结果也出现了同样的错误。
但是我修复了它。我假设在路由组下 Package <ClerkProvider>有问题，或者类似的东西。我将其移动到(root)目录，并为(auth)组创建了一个特定于样式的layout.tsx，并将样式移动到那里。它工作了。
以下是如何修复它：
1.打开(root)目录下的layout.tsx
1.将以下代码添加到(root)/layout.tsx中

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Threads",
  description: "A Next.js 13 Meta Threads App.",
};

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

字符串
1.将以下代码添加到(auth)/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex items-center justify-center h-screen bg-dark-1">
      {children}
    </div>
  );
}

型
如果你只想改变认证页面的样式，那么你应该在(auth)/layout.tsx中编辑样式，如果你想编辑整个应用的布局，那么就像编辑字体一样编辑(root)/layout.tsx。

赞(0）回复(0）举报 9个月前

hfyxw5xn2#

你可以尝试

<ClerkProvider>
  <html lang="en">
    <body className={inter.className}>{children}</body>
  </html>

字符串
到（root）/layout.tsx文件
我就是这样解决这个问题的：）

赞(0）回复(0）举报 9个月前

pn9klfpd3#

确保你将<html></html>标签嵌入到你根目录的layout.tsx文件中的<ClerkProvider></ClerkProvider>标签中

赞(0）回复(0）举报 9个月前

wydwbb8l4#

您必须使用ClerkProvider Package 您的（auth）layout.tsx，并使用ClerkProvider Package 您的（root）layout.tsx。请确保您已登录以查看更改。

赞(0）回复(0）举报 9个月前

mwg9r5ms5#

入门页面必须为

async function Page() {
      return (
        <main>
          <h1 className="head-text">Onboarding</h1>
        </main>
      );
    }
    export default Page;

字符串
和
请注意您请求的URL，/sign-in或**/sign-up**，如果您尝试在登录URL中注册，您将获得错误

赞(0）回复(0）举报 9个月前

llycmphe6#

只是简单地添加周围的布局.tsx在（根）文件夹

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

字符串

赞(0）回复(0）举报 9个月前

5f0d552i7#

在/root/layout.tsx中 Package html解决了我的问题。

赞(0）回复(0）举报 9个月前