tRPC & Next.js confused about error

Hey, I'm really new with next.js, react and trpc, I was trying to add tRPC into my small SSR next.js project to send data from the client to the server, following the tRPC Next.js examples is pretty tricky knowing close to nothing about it and I am getting a weird error. It doesn't tell me where it is, what file, I've tried mostly commenting out code from my page.tsxpage.tsx file and I still get the useState error? I'm not sure how to set up layout.tsxlayout.tsx too... That's probably what I'm doing wrong but I don't know where to find out what is wrong

layout.tsx

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

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

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

  return (
    <html lang="en">
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
};

export default trpc.withTRPC(MyApp);

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

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

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

  return (
    <html lang="en">
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
};

export default trpc.withTRPC(MyApp);

Solution

For context, trpc does not officially support Nextjs App router. Instead of wrapping your component in trpc's HoC, you can create a client component provider and wrap your app with it.

Look here https://github.com/trpc/trpc/issues/3297#issuecomment-1423905894

GitHub

feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc

Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. Describe the solution you'd like to see Being able to transparently use tRPC id...

Jump to solution

tRPC & Next.js confused about error

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

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

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

  return (
    <html lang="en">
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
};

export default trpc.withTRPC(MyApp);

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

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

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

  return (
    <html lang="en">
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
};

export default trpc.withTRPC(MyApp);

Solution

GitHub

feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc

Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. Describe the solution you'd like to see Being able to transparently use tRPC id...

Jump to solution

tRPC & Next.js confused about error

tRPC & Next.js confused about error

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads