del.hydraz Comments - Answer Overflow

del.hydraz

Posts Comments

TTCTheo's Typesafe Cult

•Created by del.hydraz on 4/16/2023 in #questions

NextJS Types & Intuition in T3 App

If there's anything wrong with what I said, lmk, I'd love to fix it for other users with the same question

8 replies

TTCTheo's Typesafe Cult

•Created by del.hydraz on 4/16/2023 in #questions

NextJS Types & Intuition in T3 App

Update I did some research and changed up what I was looking for. Long story short, you're right, those types are provided by NextJS in order to properly type the App component and any pages, which are different from regular React components. The difference between a regular React component and a NextPage component is those extra properties. From what I'm reading and what you're saying, Pages are intended to fetch data and perform actual rendering, while standard components are meant to be wrappers around shared logic/templates. The AppType is meant to be a root layout for every page Next renders, and it is the file you put your providers/app config in. The extra properties are meant to be some other properties to optionally configure, namely getInitialProps. If I'm reading the docs correctly, the generic argument represents the global state you'd like pageProps to store, ie auth data or light/dark mode preference. Example populated App I found:

// _app.js (tried to convert to tsx)
import App, { type AppType } from "next/app"
import { ThemeProvider } from "@chakra-ui/core"
import { AuthProvider, getUser } from "../components/helpers/AuthProvider"
import Layout from "../components/layouts/Layout"
import theme from "../components/theme"

const MyApp: AppType<{/*...*/}> = ({ Component, pageProps, auth }) => {
  return (
    <ThemeProvider theme={theme}>
      <AuthProvider myAuth={auth}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthProvider>
    </ThemeProvider>
  )
}
MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const auth = await getUser(appContext.ctx)
  return { ...appProps, auth: auth }
}
export default MyApp

// _app.js (tried to convert to tsx)
import App, { type AppType } from "next/app"
import { ThemeProvider } from "@chakra-ui/core"
import { AuthProvider, getUser } from "../components/helpers/AuthProvider"
import Layout from "../components/layouts/Layout"
import theme from "../components/theme"

const MyApp: AppType<{/*...*/}> = ({ Component, pageProps, auth }) => {
  return (
    <ThemeProvider theme={theme}>
      <AuthProvider myAuth={auth}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </AuthProvider>
    </ThemeProvider>
  )
}
MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const auth = await getUser(appContext.ctx)
  return { ...appProps, auth: auth }
}
export default MyApp

Sources - https://jools.dev/nextjs-_appjs-example - https://nextjs.org/docs/basic-features/pages - https://nextjs.org/docs/advanced-features/custom-app

8 replies

TTCTheo's Typesafe Cult

•Created by 低级黑小明👑 on 4/20/2023 in #questions

can't get query strings from context param

Oof, this is probably above me then. Sorry I can't help further!

20 replies

TTCTheo's Typesafe Cult

•Created by Sugan_Selvam on 4/20/2023 in #questions

Why is this re-rendering infinitely

Good point, I forgot about the useQuery hook, thanks for the correction

13 replies

TTCTheo's Typesafe Cult

•Created by 低级黑小明👑 on 4/20/2023 in #questions

can't get query strings from context param

Do you have this hosted on Vercel? The localhost URL won’t work because your localhost isn’t exposed to the outside world

20 replies

TTCTheo's Typesafe Cult

•Created by jeff.kershner on 4/20/2023 in #questions

CSS Styling

Here’s a really good video from Theo about why TailwindCSS is recommended for every T3 project and why something like HeadlessUI is not: https://youtu.be/CQuTF-bkOgc Here also is a couple of recommendations for other solutions that T3 doesn’t cover. Things like Radix for a simple component library and Class Variance Authority for full-blown design systems using TailwindCSS: https://create.t3.gg/en/other-recs/ Hope this all helps

9 replies

TTCTheo's Typesafe Cult

•Created by Sugan_Selvam on 4/20/2023 in #questions

Why is this re-rendering infinitely

Correct me if I’m wrong, but could you run the mutation in a getServerSideProps function? Theoretically that way it should only run once

13 replies

TTCTheo's Typesafe Cult

•Created by 低级黑小明👑 on 4/20/2023 in #questions

can't get query strings from context param

At level worst, you could rename the file and then pass the slug in as is to the id property in your prefetch function

20 replies

TTCTheo's Typesafe Cult

•Created by 低级黑小明👑 on 4/20/2023 in #questions

can't get query strings from context param

Just as a knee-jerk reaction, I’m seeing a couple problems. Firstly, that as-cast to a string shouldn’t be necessary and is probably introducing bugs into that function. Is that really how Theo did it in the T3 tutorial? Secondly, if I remember correctly doesn’t getStaticProps only run at build time? If you’re expecting new props each time you request a page, then you’d probably need getServerSideProps

20 replies

TTCTheo's Typesafe Cult

•Created by del.hydraz on 4/16/2023 in #questions

NextJS Types & Intuition in T3 App

Ah ok. I've seen code examples while answering questions here that use the MyApp component as a way to set up and configure provider components, in much the same way you'd use a root index.tsx file with all the provider components along with an app.tsx file with the actual page/business logic in a SPA. Is that the same intuition/pattern here, just with a MPA and a dynamic component of type NextPage?

8 replies

TTCTheo's Typesafe Cult

•Created by del.hydraz on 4/16/2023 in #questions

NextJS Types & Intuition in T3 App

Are there at least any guides or links I could follow? Maybe a link in the NextJS docs that I didn’t see?

8 replies

TTCTheo's Typesafe Cult

•Created by Meexa on 4/18/2023 in #questions

Does anyone know of a nice starting template for a React component npm package?

To add in React support, run pnpm i -D @vitejs/plugin-react and any peers, then add the Vite React plugin to the plugins array in vite.config.ts

7 replies

TTCTheo's Typesafe Cult

•Created by Meexa on 4/18/2023 in #questions

Does anyone know of a nice starting template for a React component npm package?

I actually made a template repo for creating a library using Typescript, Vite, and Vitest, with ESLint and Prettier already configured. There's even CI via GitHub actions and version managing through changesets. It uses pnpm as a package manager, but npm works too just by deleting pnpm's package lock file. Sorry if this isn't what you're looking for and my self-promotion is just plain bad. Here's the link: https://github.com/ben-laird/typelaunch

7 replies

TTCTheo's Typesafe Cult

•Created by glorenzatto on 4/18/2023 in #questions