Projects | 100xDevs https://projects.100xdevs.

com/pdf/nextjs-2/next-2-1

Step 1 - Backends in
Next.js
Next.js is a full stack framework

This means the same process can handle frontend and

backend code.

Why?

1 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

1. Single codebase for all your codebase

2. No cors issues, single domain name for your FE and BE

3. Ease of deployment, deploy a single codebase

Step 2 - Recap of Data

fetching in React
Let’s do a quick recap of how data fetching works in React

We’re not building backend yet

Assume you already have this backend route - https://week-13-
offline.kirattechnologies.workers.dev/api/v1/user/details

Code - https://github.com/100xdevs-cohort-2/week-14-2.1

Website - https://week-14-2-1.vercel.app/

User card website

Build a website that let’s a user see their name and email from the given
endpoint

2 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

UserCard component

Data fetching happens on the client

3 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Step 3 - Data fetching in Next

Ref - https://nextjs.org/docs/app/building-your-application/data-
fetching/fetching-caching-and-revalidating

You can do the same thing as the last slide in Next.js, but then you
lose the benefits of server side rendering

You should fetch the user details on the server side and pre-render the
page before returning it to the user.

4 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Let’s try to build this

1. Initialise an empty next project

npx create-next-app@latest

1. Install axios

npm i axios

1. Clean up page.tsx , global.css

2. In the root page.tsx , write a function to fetch the users details

async function getUserDetails() {

const response = await axios.get("https://week-13-offline.kirattechnologies.workers.de
return response.data;
}

1. Convert the default export to be an async function (yes, nextjs now

supports async components)

import axios from "axios";

async function getUserDetails() {

const response = await axios.get("https://week-13-offline.kirattechnologies.workers.de
return response.data;
}

export default async function Home() {

const userData = await getUserDetails();

return (
<div>
{userData.email}
{userData.name}
</div>
);
}

5 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

1. Check the network tab, make sure there is no waterfalling

1. Prettify the UI

6 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

import axios from "axios";

async function getUserDetails() {

const response = await axios.get("https://week-13-offline.kirattechnologies.workers.de
return response.data;
}

export default async function Home() {

const userData = await getUserDetails();

return (
<div className="flex flex-col justify-center h-screen">
<div className="flex justify-center">
<div className="border p-8 rounded">
<div>
Name: {userData?.name}
</div>

{userData?.email}
</div>
</div>
</div>
);
}

Good question to ask at this point - Where is the loader ?

Do we even need a loader ?

Step 4 - Loaders in Next

7 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

What if the getUserDetails call takes 5s to finish (lets say the backend is
slow). You should show the user a loader during this time

loading.tsx file
Just like page.tsx and layout.tsx , you can define a skeleton.tsx file that will
render until all the async operations finish

1. Create a loading.tsx file in the root folder

2. Add a custom loader inside

export default function Loading() {

return <div className="flex flex-col justify-center h-screen">
<div className="flex justify-center">
Loading...
</div>
</div>
}

8 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

9 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Step 5 - Introducing api

routes in Next.js
NextJS lets you write backend routes, just like express does.

This is why Next is considered to be a full stack framework.

The benefits of using NextJS for backend includes -

1. Code in a single repo

2. All standard things you get in a backend framework like express

3. Server components can directly talk to the backend

10 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Step 6 - Let’s move the

backend into our own app
We want to introduce a route that returns hardcoded values for a user’s
details (email, name, id)

1. Introduce a new folder called api

2. Add a folder inside called user

3. Add a file inside called route.ts

4. Initialize a GET route inside it

export async function GET() {

return Response.json({ username: "harkirat", email: "harkirat@gmail.com" })
}

1. Try replacing the api call in page.tsx to hit this URL

async function getUserDetails() {

try {
const response = await axios.get("http://localhost:3000/api/user")
return response.data;
} catch(e) {
console.log(e);
}
}

This isn’t the best way to fetch data from the backend. We’ll make
this better as time goes by

11 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Step 7 - Frontend for Signing

up
1. Create app/signup/page.tsx

2. Create a simple Page

import { Signup } from "@/components/Signup"

export default function() {

return <Signup />
}

1. Create components/Signup.tsx

▾ Code

import axios from "axios";

import { ChangeEventHandler, useState } from "react";

export function Signup() {

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

return <div className="h-screen flex justify-center flex-col">

<div className="flex justify-center">
<a href="#" className="block max-w-sm p-6 bg-white border border-gray-20
<div>
<div className="px-10">
<div className="text-3xl font-extrabold">
Sign up
</div>
</div>
<div className="pt-2">
<LabelledInput onChange={(e) => {
setUsername(e.target.value);

12 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

}} label="Username" placeholder="harkirat@gmail.com" />

<LabelledInput onChange={(e) => {
setPassword(e.target.value)
}} label="Password" type={"password"} placeholder="123456" />
<button type="button" className="mt-8 w-full text-white bg-gray-800
</div>
</div>
</a>
</div>
</div>

function LabelledInput({ label, placeholder, type, onChange }: LabelledInputType

return <div>
<label className="block mb-2 text-sm text-black font-semibold pt-4"
<input onChange={onChange} type={type || "text"} id="first_name" className
</div>
}

interface LabelledInputType {
label: string;
placeholder: string;
type?: string;
onChange: ChangeEventHandler<HTMLInputElement>
}

1. Convert components/Signup.tsx to a client component

"use client"

1. Add a onclick handler that sends a POST request to /user

<button onClick={async () => {

const response = await axios.post("http://localhost:3000/api/user", {
username,
password
});

}} type="button" className="mt-8 w-full text-white bg-gray-800 focus:ring-4 focus:rin

1. Route the user to landing page if the signup succeeded

13 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Ref useRouter hook - https://nextjs.org/docs/app/building-your-

application/routing/linking-and-navigating#userouter-hook

▾ Final signup.tsx

import axios from "axios";

import { useRouter } from "next/router";
import { ChangeEventHandler, useState } from "react";

export function Signup() {

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const router = useRouter();

return <div className="h-screen flex justify-center flex-col">

<div className="flex justify-center">
<a href="#" className="block max-w-sm p-6 bg-white border border-gray-20
<div>
<div className="px-10">
<div className="text-3xl font-extrabold">
Sign up
</div>
</div>
<div className="pt-2">
<LabelledInput onChange={(e) => {
setUsername(e.target.value);
}} label="Username" placeholder="harkirat@gmail.com" />
<LabelledInput onChange={(e) => {
setPassword(e.target.value)
}} label="Password" type={"password"} placeholder="123456" />
<button onClick={async () => {
const response = await axios.post("http://localhost:3000/api/user", {
username,
password
});
router.push("/")
}} type="button" className="mt-8 w-full text-white bg-gray-800 focus
</div>
</div>
</a>
</div>
</div>

14 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

function LabelledInput({ label, placeholder, type, onChange }: LabelledInputType

return <div>
<label className="block mb-2 text-sm text-black font-semibold pt-4"
<input onChange={onChange} type={type || "text"} id="first_name" className
</div>
}

interface LabelledInputType {
label: string;
placeholder: string;
type?: string;
onChange: ChangeEventHandler<HTMLInputElement>
}

We still have to implement the backend route, lets do that in the

next slide

Step 8 - Backend for signing

up
Add a POST route that takes the users email and password and for now
just returns them back

1. Navigate to app/api/user/route.ts

2. Initialize a POST endpoint inside it

15 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {

const body = await req.json();

return NextResponse.json({ username: body.username, password: body.password

}

Ref - https://nextjs.org/docs/app/api-reference/functions/next-
response

Step 9 - Databases!
We have a bunch of dummy routes, we need to add a database layer to
persist data.

Adding prisma to a Next.js project is straightforward.

Please get a free Postgres DB from either neon or aiven

16 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

1. Install prisma

npm install prisma

1. Initialize prisma schema

npx prisma init

1. Create a simple user schema

model User {
id Int @id @default(autoincrement())
username String @unique
password String
}

1. Replace .env with your own Postgres URL

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schem

1. Migrate the database

npx prisma migrate dev --name init_schema

1. Generate the client

npx prisma generate

17 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

1. Finish the signup route

export async function POST(req: NextRequest) {

const body = await req.json();
// should add zod validation here
const user = await client.user.create({
data: {
username: body.username,
password: body.password
}
});

console.log(user.id);

return NextResponse.json({ message: "Signed up" });

}

1. Update the GET endpoint

export async function GET() {

const user = await client.user.findFirst({});
return Response.json({ name: user?.username, email: user?.username })
}

We’re not doing any authentication yet. Which is why we’re not
returning a jwt (or setting a cookie) here

Step 10 - Better fetches

18 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

For the root page, we are fetching the details of the user by hitting an
HTTP endpoint in getUserDetails

Current solution
import axios from "axios";

async function getUserDetails() {

try {
const response = await axios.get("http://localhost:3000/api/user")
return response.data;
} catch(e) {
console.log(e);
}
}

export default async function Home() {

const userData = await getUserDetails();

return (
<div className="flex flex-col justify-center h-screen">
<div className="flex justify-center">
<div className="border p-8 rounded">
<div>
Name: {userData?.name}
</div>

{userData?.email}
</div>
</div>
</div>
);
}

getUserDetails runs on the server. This means you’re sending a request

from a server back to the server

19 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

Better solution
import { PrismaClient } from "@prisma/client";

const client = new PrismaClient();

async function getUserDetails() {

try {
const user = await client.user.findFirst({});
return {
name: user?.username,
email: user?.username
}
} catch(e) {
console.log(e);
}
}

export default async function Home() {

const userData = await getUserDetails();

return (
<div className="flex flex-col justify-center h-screen">
<div className="flex justify-center">
<div className="border p-8 rounded">
<div>
Name: {userData?.name}

20 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

</div>

{userData?.email}
</div>
</div>
</div>
);
}

Step 11 - Singleton prisma

client
Ref - https://www.prisma.io/docs/orm/more/help-and-troubleshooting/
help-articles/nextjs-prisma-client-dev-practices

1. Create db/index.ts

2. Add a prisma client singleton inside it

import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {

return new PrismaClient()
}

declare global {
var prisma: undefined | ReturnType<typeof prismaClientSingleton>
}

const prisma = globalThis.prisma ?? prismaClientSingleton()

21 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma

1. Update imports of prisma everywhere

import client from "@/db"

Step 12 - Server Actions

Ref - https://nextjs.org/docs/app/building-your-application/data-
fetching/server-actions-and-mutations

Right now, we wrote an API endpoint that let’s the user sign up

export async function POST(req: NextRequest) {

const body = await req.json();
// should add zod validation here
const user = await client.user.create({
data: {
username: body.username,
password: body.password
}
});

console.log(user.id);

return NextResponse.json({ message: "Signed up" });

}

22 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

What if you could do a simple function call (even on a client component

that would run on the server?) (similar to RPC )

Under the hood, still an HTTP request would go out. But you would
feel like you’re making a function call

Steps to follow
1. Create actions/user.ts file (you can create it in a different folder)

2. Write a function that takes username and password as input and

stores it in the DB

"use server"

import client from "@/db"

export async function signup(username: string, password: string) {

// should add zod validation here
const user = await client.user.create({
data: {
username: username,
password: password
}
});

console.log(user.id);

return "Signed up!"

}

1. Update the Signup.tsx file to do the function call

import { signup } from "@/actions/user";;

...

<button onClick={async () => {

const response = await signup(username, password);

23 of 24 10/9/24, 18:27
Projects | 100xDevs https://projects.100xdevs.com/pdf/nextjs-2/next-2-1

localStorage.setItem("token", response);
router.push("/")
}} type="button" className="mt-8 w-full text-white bg-gray-800 focus:ring-4 focus:rin

Check the network tab

Benefits of server actions

1. Single function can be used in both client and server components

2. Gives you types of the function response on the frontend (very similar
to trpc)

3. Can be integrated seamlessly with forms (ref https://

www.youtube.com/watch?v=dDpZfOQBMaU)

24 of 24 10/9/24, 18:27