anyone else think app directory is not worth?
Seems like app just breaks a lot of things in the t3 stack. Seems little community support. Just doesn't seem worth the time to try and debug and rewrite a ton of code for the same results.
Are most of yall still using the pages directory?
Are most of yall still using the pages directory?
16 Replies
I’m still on pages and will be for the foreseeable future.
I'm still using pages directory for my personal projects for the reasons you stated. I'll look into migrating over once TRPC (+T3) has a stable release for AppDir
Despite the fact that the
create-t3-turbo
repo supports the app
directory, it uses a beta version of React Query. Therefore, I have decided to keep my project under the pages
router.
And it also wraps all the components within the use-client
provider. With this approach, I don't know what advantages there might be...The app directory is great for creating new projects - as it requires a huge mental shift and wants you to architect your applications around the entire paradigm
A PR is in the work: https://github.com/t3-oss/create-t3-app/pull/1567
We may get app dir soon in T3.
GitHub
feat: appdir option (smaller version) by juliusmarminge · Pull Requ...
smaller, less opinionated version of #1446
This alternative does not include:
Server Actions
ShadCN-ish tailwind config
Custom UI Button component with twMerge
do you have an example app that uses the t3 stack?
You can refer to my project "Teensy" - https://github.com/shiroyasha9/teensy
It is deployed at https://teensy.tech
The master branch uses pages router implemention of the t3 stack. However, I did some tinkering of my own, and made a sort of "custom" implementation of the stack that works on the app router. I'll be pushing to prod in maybe a week, but you can check the implementation for that here - https://github.com/shiroyasha9/teensy/tree/feature/migrate-to-next13
GitHub
GitHub - shiroyasha9/teensy: 🚀 A customizable URL shortener with an...
🚀 A customizable URL shortener with analytics. Contribute to shiroyasha9/teensy development by creating an account on GitHub.
Teensy your long boring URLs
A Customizable URL shortener. Paste URL, give it a name, done!
GitHub
GitHub - shiroyasha9/teensy at feature/migrate-to-next13
🚀 A customizable URL shortener with analytics. Contribute to shiroyasha9/teensy development by creating an account on GitHub.
Thanks @shiroyasha9 I will retry implementing pages next week and let ya know how that goes! You're examples look great!
@shiroyasha9 finally have time to work on this. Can we not use createTRPCNext anymore in app directory? and just use export default api.withTRPC(RootLayout)?
I wasn't able to find a working solution for the TRPCNext, and so had to resort to the React package. I had followed a video from Jack Herrington for this implementation, and then added things like context to it.
Video - https://youtu.be/qCLV0Iaq9zU?si=hKh33k6ZNy6aavCI
Jack Herrington
YouTube
tRPC + NextJS App Router = Simple Typesafe APIs
👉 Upcoming NextJS course: https://pronextjs.dev
👉 Code : https://github.com/jherr/trpc-on-the-app-router
👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: https://discord.gg/ddMZFtTDa5
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh...
Okay I'll check this video out, hope i don't have to refactor my entire api.
Thanks @shiroyasha9
I didn't have to change a single line in my api routers, it was just the utils file and the trpc file which setups the context
@Randy_Randerson_son refer this commit of mine - https://github.com/shiroyasha9/teensy/commit/78a0fb322c9ada4ac2036aeaa89d419ad2c42049
@shiroyasha9 had some difficulties but after a walk I got my APIServer and APIClient working now, thanks for the support. I'll continue with the refactor and see what all the fuss is about with app router now
Are TRPC routers running on server but calls to the routes are made on the clients side with those solutions above since they all uses “use client”? So is it currently impossible to use TRPC to prefetch data and render html on server side in app dir ….?
@omotto nope you can use this then in your page you create a getData function and change your page into an async function and await getData. so a simple non functional example is getData would have then in the page and pass that data the components you want to render server side. You can also pass it to components that have "use client". and they will render server side if you need access to react hooks, contexts, zustand...which I did for various reasons one being a theme context that users can select different themes.
Also @here app router slaps, just took me awhile to transition into the new concepts.
I c, thank you for this! I’ll give it a try on the project.