Closed peterkibuchi closed 1 year ago
For next-auth, see here: https://next-auth.js.org/configuration/nextjs#in-app-directory.
@trpc/next is for the pages/ directory. It uses getInitialProps which isn't a thing in app/. We got a few experimental repos on the trpc org that showcase how you can use it both with and without react query: https://github.com/trpc/next-13, https://github.com/trpc/trpc/tree/next13-experiment/examples/next-13-starter
Not many libs wrap their stuff in "use client" so you'll prob need some barrel exports that exports the component with a "use client" directive. See here for example: https://github.com/juliusmarminge/jumr.dev/blob/main/app/use-client.tsx
I decided to use @shadcn/ui as my UI library (for NextJS), and as such was forced to transition to the App router and RSCs.
I dont understand, why were you forced to use the app/ directory? shadcn/ui works in every react project..
I am working on another playground for a bunch of these new tech here, might give you some ideas.
This is incredibly useful, thank you.
I dont understand, why were you forced to use the app/ directory? shadcn/ui works in every react project.
Forced was perhaps the wrong choice of word. I wasn't implying they don't work with the pages directory. It's just that Shad uses the App router and RSCs on the shadcn/ui site, which I'm taking inspiration from, so I took it as an opportunity to start learning about them.
PS:
I am working on another playground for a bunch of these new tech here, might give you some ideas.
This is brilliant! It's exactly the kind of inspiration I was looking for. Thanks.
This repo now uses app dir
NextJS 13 App router is close to hitting stable, and I speculate they will announce it at the upcoming Vercel Launch Event (1st - 5th May). Transitioning to the App router and React Server Components introduces breaking changes to the way the repo is currently set up; I'd like to ask for the community's insight on how to address them.
I am currently working on an project built off this repo, with a NextJS "admin" app for creating content, and an Expo "consumer" mobile app for viewing it. I decided to use @shadcn/ui as my UI library (for NextJS), and as such was forced to transition to the App router and RSCs.
I quickly ran into some issues, the first one being that auth with NextAuth broke. I had assumed that since auth is implemented separately, simply moving the
api
folder from thepages
to theapp
directory, then wrapping the app withSessionProvider
(withinapp/layout.tsx
) would be sufficient:but it wasn't. I got the following error:
It appears
@trpc/next
uses useState under the hood and that's a No Bueno when it comes to RSCs. So I tried adding"use client"
to the top of./apps/nextjs/src/utils/api.ts
, and got this error instead:packages/auth
Theo discussed a few ideas on how the transition might happen but a lot's still up in the air. I think it would be great if someone could come up with a Work In Progress PR of what the transition might look like. That way the community could chip in and we could all start to get a practical idea of what the T3 Monorepo will shape up to be. Theo has an experimental repo on what that could look like (though it's a single NextJS app running Clerk for auth) in case anyone's interested.