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?
16 Replies
owenwexler
owenwexler14mo ago
I’m still on pages and will be for the foreseeable future.
Circus
Circus14mo ago
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
ekshin
ekshin14mo ago
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...
shiroyasha9
shiroyasha914mo ago
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
pierrickgt
pierrickgt14mo ago
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
Max
Max14mo ago
do you have an example app that uses the t3 stack?
shiroyasha9
shiroyasha914mo ago
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.
Max
Max14mo ago
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)?
shiroyasha9
shiroyasha914mo ago
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...
Max
Max14mo ago
Okay I'll check this video out, hope i don't have to refactor my entire api. Thanks @shiroyasha9
shiroyasha9
shiroyasha914mo ago
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
Max
Max14mo ago
@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
tomoS
tomoS14mo ago
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 ….?
Max
Max14mo ago
@omotto nope you can use this
import { appRouter } from "@acme/api/src/root";
import { prisma } from "@acme/db";
import { createServerSideHelpers } from "@trpc/react-query/server";
import superjson from "superjson";

export const APIServer = createServerSideHelpers({
router: appRouter,
ctx: { prisma, clerkUserId: null },
transformer: superjson,
});
import { appRouter } from "@acme/api/src/root";
import { prisma } from "@acme/db";
import { createServerSideHelpers } from "@trpc/react-query/server";
import superjson from "superjson";

export const APIServer = createServerSideHelpers({
router: appRouter,
ctx: { prisma, clerkUserId: null },
transformer: superjson,
});
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
const company = await APIServer.company.getCompanyBySymbol.fetch({
symbol,
}); and return {company: superjson.stringify(company)}
const company = await APIServer.company.getCompanyBySymbol.fetch({
symbol,
}); and return {company: superjson.stringify(company)}
then in the page
const { company } = await getData(
params,
); and const companyData: object | null = company ? superjson.parse(company) : null;
const { company } = await getData(
params,
); and const companyData: object | null = company ? superjson.parse(company) : null;
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.
tomoS
tomoS14mo ago
I c, thank you for this! I’ll give it a try on the project. thinkies
Want results from more Discord servers?
Add your server