Theo's Typesafe Cult•14mo ago

NextJS Types & Intuition in T3 App

Hello, I recently wanted to make a REST API using the T3 stack and the OpenAPI tRPC adapter. I'd also wanted to use T3 in other projects because I simply love the stack and know a fair bit about each respective layer except for NextJS. I have familiarity with multiple other (meta) frameworks, like Svelte/SvelteKit, Solid, Astro, and React, but Next always trips me up. I tend to learn a framework through its types, and the NextJS types/patterns are somewhat confusing to me, especially with the NextJS 13 transition and React Server components (hence why the deep questions tag; I know the goals Next wants to achieve and how they're achieved in other frameworks, as well as the basics of how they're achieved in Next, ie with getStaticProps). I have two questions, one vv specific and one a lot more general. Firstly, I'd like to know what the purpose of some of the types used in the starter + tRPC + Prisma + Tailwind T3 app are. I've tried googling/asking chatGPT in a ton of different ways, but I can't seem to find an explanation for these types. Here they are below, with question annotations in comments:

// src/_app.tsx

import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";

const MyApp: AppType = ({ Component, pageProps }) => { // What does the AppType do? What should I put into its generic for pageProps?
  return <Component {...pageProps} />; // What does the Component do?
};

export default api.withTRPC(MyApp);

// src/_app.tsx

import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";

const MyApp: AppType = ({ Component, pageProps }) => { // What does the AppType do? What should I put into its generic for pageProps?
  return <Component {...pageProps} />; // What does the Component do?
};

export default api.withTRPC(MyApp);

// src/index.tsx

//imports...

const Home: NextPage = () => { // What does the NextPage type do? Why are there other properties like defaultProps?
  // logic...
};

export default Home;

// src/index.tsx

//imports...

const Home: NextPage = () => { // What does the NextPage type do? Why are there other properties like defaultProps?
  // logic...
};

export default Home;

Second question is a lot more general. How do I think of NextJS's data flow with these types? Is it the traditional React-style "drill down props and add context/providers" or is there something I'm not seeing. Tysm in advance for any help!

7 Replies

del.hydraz•14mo ago

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

JulieCezar•14mo ago

Check out these 2 videos: Theo's T3 guide, if you watch it all you will get most of the info you are looking for. https://www.youtube.com/watch?v=YkOSUVzOAA4&t=6039s In depth NextJS https://www.youtube.com/watch?v=d2yNsZd5PMs&pp=ygUOcGluZy5nZyBuZXh0anM%3D If you have any question after, ask them again 🙂

Theo - t3․gg

YouTube

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this 🙏 GITHUB REPO https://github.com/t3dotgg/chirp DEPLOYED APP https://xn--uo8h.t3.gg/ GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/ ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg Everything else (Twitch, Twitter, Discor...

Theo - t3․gg

YouTube

How NextJS REALLY Works

NextJS is probably the best way to build your next React application. There are few better ways to do full stack with Javascript. Hopefully this video helps you better understand why! THANK YOU MIR FOR THE GRIND TO GET THIS OUT TODAY!!! ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo ALL MY BEST MEMES ARE ON TWITTER FIRST htt...

JulieCezar•14mo ago

However, I will try to answer as best as I can. AppType is not of T3 but from Next. That's their general type for the wrapper of the whole application and in most cases you don't need to touch this. In T3 they only defined this because the App should be of that type. Component is passed as an argument to your App, you can interpret this as the actual pages files (components) which will be loaded when you visit a specific page. I'm not too sure about NextPage but as far as I know it is a type alias for a React component that includes a getInitialProps function that is used for fetching data needed for server-side rendering. So you should follow the Vercel instructions which say that you should use NextPage as a default to create pages, but even if you leave it out it shouldn't be a problem. You might not get 100% typesafety on some of Next's features on that page tho. And yes you can think of the data flow as traditional React. Next13 and the app directory changes mostly affect data fetching strategies but you still pass props to your children like you would with only React. Of course, you can also use Context, state libraries etc... (although you need to be careful here, I don't know about context but some state libraries do not yet fully support React server components out of the box)

del.hydraz•14mo ago

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?

del.hydraz•14mo ago

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

Next.js _app.js example

Use _app.js to extend react applications in Next.js.

Basic Features: Pages | Next.js

Next.js pages are React Components exported in a file in the pages directory. Learn how they work here.

Advanced Features: Custom App | Next.js

Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.

del.hydraz•14mo ago

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

JulieCezar•14mo ago

It seems correct 😄

Gaming

Programming

NextJS Types & Intuition in T3 App