Next 14 app router

Is there any docs for NextJS 14 app router integration ?
17 Replies
ameetmadan
ameetmadanโ€ข3w ago
I have the same questsion
ameetmadan
ameetmadanโ€ข3w ago
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
ameetmadan
ameetmadanโ€ข3w ago
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.
Rohit Verma
Rohit Vermaโ€ข7d ago
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
Rohit Verma
Rohit Vermaโ€ข7d ago
any url/reference for the same
๐šœ๐š—๐š˜๐š˜๐šฃ๐šŽ
Create T3 App
Create T3 App
The best way to start a full-stack, typesafe Next.js app.
Rohit Verma
Rohit Vermaโ€ข6d ago
@๐šœ๐š—๐š˜๐š˜๐šฃ๐šŽ 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
Rohit Verma
Rohit Vermaโ€ข5d ago
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 ?
Rohit Verma
Rohit Vermaโ€ข5d ago
@๐šœ๐š—๐š˜๐š˜๐šฃ๐šŽ https://github.com/rverma-dev/t3-app-bug/commit/d08f1ca79e3dcbba6033b477308a14b7ee530536. Thanks a lot for your time
๐šœ๐š—๐š˜๐š˜๐šฃ๐šŽ
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.
Rohit Verma
Rohit Vermaโ€ข5d ago
@๐šœ๐š—๐š˜๐š˜๐šฃ๐šŽ 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.
Rohit Verma
Rohit Vermaโ€ข5d ago
but when i do the exact copy of create-post and created a create-video, it doesn't work for that