del.hydraz Posts - Answer Overflow

del.hydraz

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

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!

8 replies

Gaming

Programming