Recnet-specific
File structure
/src
  |-- /app
  |-- /components
  |-- /firebase
  |-- /hooks
  |-- /server
  |-- /utils
  |-- /clientEnv.ts
  |-- /serverEnv.ts
  |-- /constants.ts
  |-- /middleware.ts

/src

/app

Next.js application. We used Nextjs App Router for routing. Therefore, the structure is nested here. Proceed to Nextjs App Router (opens in a new tab) for more information.

Note that we encourage colocation (opens in a new tab) of components and pages. Therefore, if the component is only used in a single page, it should be placed in the same directory as the page.

Basic knowledge:

  • layout.tsx is the layout for this route. It's shared between this route and all the children routes.
  • page.tsx is the page content for this route.
  • loading.tsx is the loading page for this route.

Learn more:

/components

Reusable custom components across the application and their unit tests.

/hooks

Reusable custom hooks and their unit tests.

/firebase

We use Firebase as our authentication provider. And use next-firebase-auth-edge (opens in a new tab) as our auth library. It provides features for us to access authentication information(e.g. token) in the server-side and also set custom claims server-side. Learn more at Authentication page.

This directory contains the Firebase configuration and login/logout functions.

/server

Contains trpc routers. We use trpc (opens in a new tab) for type-safe API calls. It provides a type-safe way to define API calls and make it looks like PRC(Remote Procedure Call) from client side. Learn more at TRPC page.

clientEnv.ts, serverEnv.ts

Store environment variables and the schemas for Next.js client and server sides. These files will load the environment variables from .env.local and use zod to parse them. It will throw an error if the environment variables are not defined or have the wrong format.

Nx MonorepoTRPC