T3

T3 means: Typescript, tRPC, Tailwind

Basically a Nextjs project wrapper/scaffolder which make sure that correct(Typescript based) environment is created.

This system uses tRPC - Typesript Remote Procedure Call instead of API (HTTP-GET, POST, PUT) there are functions to be called in server to perform CRUD. Removing API layer from project.

The best of the full stack TypeScript ecosystem

Next.js

Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. It’s the industry standard and we’re proud to build on top of it :)

Prisma

Prisma is the best way to work with databases in TypeScript. It provides a simple, type-safe API to query your database, and it can be used with most SQL dialects (and Mongo too!).

TypeScript

We firmly believe TypeScript will help you be a better web developer. Whether you’re new to JS or a seasoned pro, the “strictness” of TypeScript leads to smoother building.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that helps you build beautiful, responsive designs without any extra configuration. It’s built with utility-first principles, and is completely customizable and extendable.

tRPC

If your frontend and backend are TypeScript, it’s really hard to beat the DX of tRPC. Kinda like GraphQL but without the work - seriously this lib is magic. NextAuth.js

NextAuth.js

When you need flexible, secure, and scalable auth, NextAuth.js is top notch. It ties into your existing database and provides a simple API to manage users and sessions.

Getting started:

To create a project with t3

yarn create t3-app

See, installation for more details.

yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "create-t3-app > @ianvs/prettier-plugin-sort-imports@4.4.0" has unmet peer dependency "prettier@2 || 3".
[4/4] Building fresh packages...

success Installed "create-t3-app@7.38.1" with binaries:
      - create-t3-app

   ___ ___ ___   __ _____ ___   _____ ____    __   ___ ___
  / __| _ \ __| /  \_   _| __| |_   _|__ /   /  \ | _ \ _ \
 | (__|   / _| / /\ \| | | _|    | |  |_ \  / /\ \|  _/  _/
  \___|_|_\___|_/‾‾\_\_| |___|   |_| |___/ /_/‾‾\_\_| |_|


│
◇  What will your project be called?
│  hello-t3
│
◇  Will you be using TypeScript or JavaScript?
│  TypeScript
│
◇  Will you be using Tailwind CSS for styling?
│  Yes
│
◇  Would you like to use tRPC?
│  Yes
│
◇  What authentication provider would you like to use?
│  NextAuth.js
│
◇  What database ORM would you like to use?
│  Prisma
│
◇  Would you like to use Next.js App Router?
│  Yes
│
◇  What database provider would you like to use?
│  PostgreSQL
│
◇  Should we initialize a Git repository and stage the changes?
│  Yes
│
◇  Should we run 'yarn'?
│  Yes
│
◇  What import alias would you like to use?
│  ~/

Using: yarn

✔ hello-t3 scaffolded successfully!

Adding boilerplate...
✔ Successfully setup boilerplate for nextAuth
✔ Successfully setup boilerplate for prisma
✔ Successfully setup boilerplate for tailwind
✔ Successfully setup boilerplate for trpc
✔ Successfully setup boilerplate for dbContainer
✔ Successfully setup boilerplate for envVariables
✔ Successfully setup boilerplate for eslint

Installing dependencies...
✔ Successfully installed dependencies!

Initializing Git...
│
◇  Warning: "hello-t3" is already in a git worktree. Would you still like to initialize a new git
repository in this directory?
│  No
ℹ Skipping Git initialization.
Next steps:
  cd hello-t3
  Start up a database, if needed using './start-database.sh'
  yarn db:push
  Fill in your .env with necessary values. See https://create.t3.gg/en/usage/first-steps for more info.
  yarn dev
  git commit -m "initial commit"

The wizard will ask questions regarding project to setup.

These are the tech stack:

• Next.js
• NextAuth.js
• Prisma
• Drizzle
• Tailwind CSS
• tRPC

By default they have provided Discord authentication for NextAuth.

The project automatically creates the .env file too.

You just have to add your DB URL .

Default page:

Project Structure:

Inside src directory there are 3 major directories:

1. app

app directory contains

• page.tsx

The contents for this page were just shown above.

Let’s remove unusable stuff add see the page.tsx closer.

Only this much is important.

In this page there are 2 variables hello, and session which are imported from trpc and server respectively.

const hello = await api.post.hello({ text: "from tRPC" });

So, hello awaits for the response from api.post.hello after sending the data {text: “fromtRPC”}

Here hello() is a function.

If you send “YourName” in text, the response will be Hello YourName.

This is just to show the basic RPC request and response.

The next is the session.

Session is related to auth, here for auth there is Discord provider(I don’t have a Discord account).

The Button for Sign In is interesting it points to /api/auth/signin but there is nothing(something but not signin)

import { handlers } from "~/server/auth";

export const { GET, POST } = handlers;

Contents of src/app/api/auth/[...nextauth]/route.ts

nextauth in this route catches signin ??

I got some help and got this

How NextAuth.js Works with Sign-In

When you redirect to /api/auth/signin, NextAuth.js will catch this request and determine the appropriate action based on the HTTP method:

    GET Request: This might render a sign-in page or return a response that allows the user to enter their credentials.
    POST Request: This is where the actual sign-in logic occurs. The credentials provided by the user are validated, and if successful, the user is authenticated.

When I redirect user to /api/auth/signin NextAuth render signin from the provider that was used.

If I commented the provider from authConfig there is nothing rendered.

For starters I would like to use Credentials as a providers for this. Will get back to it.

• layout.tsx

In layout the children are wrapped around by this contains TRPC client.

• api (Contains auth and trpc)
  • src/app/api/auth/[…nextauth]/route.ts
  • src/app/api/trpc/[trpc]/route.ts

These 2 routes are there.

• components Contains all the components to be used in pages.

2. server

This directory contains:

• api

So, server/api seems like the new API layer which will used by tRPC. Inside this appRouter is defined which includes other routes.

These routes houses the functions that were called earlier api.post.hello()

• auth Contains the NextAuth files, config and NextAuth() export

• db Contains the database client, here Prisma client.

3. trpc

trpc contains things related to query, tRPC server and client. Which we will get back to it.

The repo till now can be found here

Now that basic of T3 is covered, let’s try creating a Credentials provider so that we get deeper understanding of T3.

Next blog is about that only, see you in that!