Theo's Typesafe Cult•16mo ago

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•16mo ago

I’m still on pages and will be for the foreseeable future.

Circus•16mo 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•16mo 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•16mo 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•16mo 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

MaxOP•16mo ago

do you have an example app that uses the t3 stack?

shiroyasha9•16mo 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.

MaxOP•15mo 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•15mo 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...

MaxOP•15mo ago

Okay I'll check this video out, hope i don't have to refactor my entire api. Thanks @shiroyasha9

shiroyasha9•15mo 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

shiroyasha9•15mo ago

@Randy_Randerson_son refer this commit of mine - https://github.com/shiroyasha9/teensy/commit/78a0fb322c9ada4ac2036aeaa89d419ad2c42049

GitHub

Add trpc client to app router · shiroyasha9/teensy@78a0fb3

MaxOP•15mo 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•15mo 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 ….?

MaxOP•15mo 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•15mo ago

I c, thank you for this! I’ll give it a try on the project. thinkies

Gaming

Programming

anyone else think app directory is not worth?