feat: Add an example/tutorial on how to create more client T3 Next.JS apps that consume the main Next.js backend

[dBianchii]

Describe the feature you'd like to request

As I was using this awesome project, I realized it wasn't so simple for me to add a new client T3 Next.JS application. I was wondering if we could have a tutorial/example featuring how a new T3 app can be added to apps folder with proper API consumption of the main Next.JS app.

Describe the solution you'd like to see

A tutorial OR an implemented example in the apps folder featuring how to add a new client/frontend T3 Next.js application that can consume /api/auth and /api/trpc from the main Next.JS app.

I was trying to do this myself, and kind of managed it to work for consuming the /api/trpc route from the main app. But it wasn't so simple, as I had to enable CORS and also correctly setup getBaseUrl() function to point to the correct endpoint. (Which wasn't a big deal).
Right now, I am stuck trying to figure out how to make this second client nextjs app consume the /api/auth endpoint of the main one.
Here are some of the things that aren't clear to me:

• How to properly consume the /api/auth endpoint on the master app
• How should I properly add the @acme/db, @acme/auth packages to my client T3 application. (For @acme/api, it was specified in the docs I should not add it do dependencies and only dev dependencies)

I understand this might be too much to have in the project, and possibly wouldn't be a good idea to have it configured with the default template. But I was wondering if anyone would like to create such tutorial so that more people could easily add as many T3 projects as they like, all consuming the same backend

Additional information

No response

[juliusmarminge]

I don't have time to make a proper guide right now, if anyone wants to do so feel free, might be good to put in docs as part of #401

For some references, see

• https://github.com/t3-oss/create-t3-turbo/tree/vite-auth/apps/vite
• https://github.com/t3-oss/create-t3-turbo/tree/testy-app/apps/testy

[ashutosh887]

@juliusmarminge @dBianchii
I would like to work on this one!
Please assign

[juliusmarminge]

@juliusmarminge @dBianchii
I would like to work on this one!
Please assign

Awesome, feel free to submit a draft PR when you've started to let others know you're working on it. I tend to not assign people since often times it leads to stale issues since someone thinks the issue is being worked on when it might not be :/

[ashutosh887]

Sure @juliusmarminge
How do you want the apps to be?
I mean what tutorials do we need actually?

[juliusmarminge]

I mean what tutorials do we need actually?

I think it should be a step by step guide on how to start a new app and set it up to consume the trpc api. (if it's a "browser-based-environment" we could also show how to setup next-auth for it but that's a bit more tricky so we can leave that for a follow up if you want)

Not sure what the OP thinks is necessary?

[dBianchii]

Hi @juliusmarminge, @ashutosh887
I added this when I encountered some friction in being able to implement a new Next.JS app. So, some things that come to mind:

• How to create a new nextjs app (should it be from a template? Should we copy paste from @acme/nextjs?)
• If it is not from a template, but is a copy of @acme/nextjs?, then we should show how to connect tRPC, how to connect next-auth
• Also, I think maybe one thing it could have is some explanation on how to create tRPC's createServerSideHelpers with createTRPCProxyClient in this new app, for the second Next.JS backend talk to the main one.

One thing I would find interesting would be to add a new Next.JS app in the template that consumes the main backend one. But I do understand that this involves adding more prolonged maintenance to this repo, and is probably not prefered.

Oh, wanted to add that I had created this image for my project some time ago (to help visualize). Might not be what everyone wants to do, but this is kind of the gist of what I think makes sense, for parts to be able to talk to each other. Leaving it here in case it can be helpful:

[ashutosh887]

Let me create a sample application with Next.js 13 from scratch and figure things out if you suggest @juliusmarminge @dBianchii

[dBianchii]

Let me create a sample application with Next.js 13 from scratch and figure things out if you suggest @juliusmarminge @dBianchii

Let me know if I can help with anything. Either through suggestions or getting this set up.
I'm very new to open source, so I'm just tagging along and trying things out to see how I go

[dBianchii]

Hi @ashutosh887, do you have a working example of this? I am really struggling to get NextAuth working in another Next.Js client app

[DawidWraga]

any updates on this?

[AyoCodess]

Wouldn’t it make more sense to have an app called “backend” which all the other apps consumed.

[peterkibuchi]

I was trying to do this myself, and kind of managed it to work for consuming the /api/trpc route from the main app. But it wasn't so simple, as I had to enable CORS and also correctly setup getBaseUrl() function to point to the correct endpoint. (Which wasn't a big deal).

Right now, I am stuck trying to figure out how to make this second client nextjs app consume the /api/auth endpoint of the main one.

Hi @dBianchii. You mentioned that you were easily able to get a second NextJS app to consume the tRPC backend being served from the first NextJS app, and was only having trouble getting the auth set up. Would you mind sharing how you did it, or better yet point me to an example repo?

I've been working on a project with a similar setup — 2 separate client NextJS apps, with one supposed to consume the tRPC endpoint served on the other. The docs suggest using trpc-openapi but I ran into a bunch of issues trying to implement that approach.

I'm considering combining them into a single monorepo but I'm not sure how to consume the tRPC endpoint on the second client side app. I'm using clerk so I don't think auth will be an issue.

[fe-franco]

Hi, I'm trying to setup a vite frontend, but when i try to import a component from @acme/ui it doesn't build an throws this error:

Error: The following dependencies are imported but could not be resolved:

  @acme/ui/button 

But I the @acme/ui package is in the package.json

Does anyone have some insight on how to fix this?