Next 14 app router
Is there any docs for NextJS 14 app router integration ?
17 Replies
I have the same questsion
not really sure how to do this step in App router https://trpc.io/docs/client/nextjs/setup#5-configure-_apptsx
Set up with Next.js | tRPC
Recommended file structure
Just found this https://github.com/trpc/trpc/tree/main/examples/.experimental/next-app-dir - not going ahead with using trpc in my app for now
GitHub
trpc/examples/.experimental/next-app-dir at main ยท trpc/trpc
๐งโโ๏ธ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc
Sorry, missed your reply, I had to start using it becuase I didn't want to use route handlers.
However, I made a solution for it for now, looked up how t3.gg does it and added some parts of my own.
hey @๐๐๐๐๐ฃ๐ can you please share references. Even I started with https://discord.com/channels/867764511159091230/1247202570632560640/1247894624459161660 but the docs seems not having any references of these
@Rohit Verma Look out the t3gg setup, i'm happy with that
any url/reference for the same
@Rohit Verma https://create.t3.gg/
@๐๐๐๐๐ฃ๐ thanks for sharing, i tried that but kind of stuck for quiet sometime. I had copied the provided create-post component and created a duplicate create-video component, exact same just different db table.
https://github.com/rverma-dev/t3-app-bug/commit/d08f1ca79e3dcbba6033b477308a14b7ee530536. However the page gets rendered and immediately it error out Error: โ Attempted to access a server-side environment variable on the client.
Kind of looking at it for last 4-5 hours but no luck at all. The code is exact same as of create-post but don't work.
what kind of env var are you trting to access from client
no, i am not trying to access any env, its the default prisma client env.NODE_ENV
infact when i removed the env variables the error changed to
Error: You're trying to use @trpc/server in a non-server environment. This is not supported by default.
For some reason the create-post setup is working on the server but the create-video is trying to run on the client side
infact it first render the desired layout and then immediately move to error page
Also somewhere in console I see Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
@๐๐๐๐๐ฃ๐ any suggestions please. Kind of stuck.Can you show me some code ?
@๐๐๐๐๐ฃ๐ https://github.com/rverma-dev/t3-app-bug/commit/d08f1ca79e3dcbba6033b477308a14b7ee530536. Thanks a lot for your time
this is the default generated code https://github.com/rverma-dev/t3-app-bug/commit/cfdfd6d1009372793144e37a62c61e633776a33c
Hm, by just checking the code, i'm assuming this has to do with next-auth but still not sure.
can you try the createPost func as a publicProcedure instead ?
If that doesnt work make your env variables public just to see if thats the case to proceed with a solution.
@๐๐๐๐๐ฃ๐ the culrpit is not at all the create-post, even with the, just by commenting https://github.com/rverma-dev/t3-app-bug/blob/d08f1ca79e3dcbba6033b477308a14b7ee530536/src/app/page.tsx#L89, the entire create-post works perfectly fine.
GitHub
t3-app-bug/src/app/page.tsx at d08f1ca79e3dcbba6033b477308a14b7ee53...
Contribute to rverma-dev/t3-app-bug development by creating an account on GitHub.
but when i do the exact copy of create-post and created a create-video, it doesn't work for that