Full Stack: Connecting Next Js 15 with FastAPI | Part 1

Assalam o Alaikum and Hello there, In this series we are going to start building a Full Stack app, using multiple technologies including:

1. Next Js (Frontend)
2. FastAPI (Backend)
3. Gemini (AI API)

Roman Urdu

Shuru Karty hain!

Next Js

Sb sy pehly hum Next Js ko setup karein gy, usky lye simply aap ny aik command run krni hai, apnay cmd ya terminal py:

# agar apkay pass npm installed hai
npx create-next-app test-app

# agar aap pnpm use kr rhy hain tou
pnpx create-next-app test-app

Isky baad apko wo kuch options provide kry ga choose krny ky lye, jo use krna chahein karein, aur jinko ignore karna chahein karein. Mein is project ky lye, ye options choose karun ga:

All selected to Yes except for alias

Aab aap ny vs code ky ander is project ko open karna hai, aur dummy code remove kr dena hai, page.tsx ki file mein sy. Aur aap ki page.tsx ki file mein sirf ye code hona chahye:

export default function Home() {
  return (
   <>
   </>
  );
}

Ab hum src and app ky folder mein new folders add karein gy, aur yehi folder structure standard hai. Apka folder structure, kuch is tarah ka dikhy ga:

-src
--app                  // jahan pr apki puri website hai
--app/api              // sari backend ki API's yahan sy call hon gi
--store                // states store houn gi
--handlers             // functions ki bodies hon gi
--constants            // jitna bhi dummy data ho ga wo sara yahan sy jaye ga
--components           // website ky ander jitny components hon gy wo yahan pr banein gy
--components/ui        // components ky ander UIka folder hoga, aur multiple coonents aik UI ky ander ayein gy

Folder Structure

Upto you, aap ny jo add ya subtract krna ho, jesy db ka folder.

Ab bari ati hai, FastAPI ki!

FastAPI

FastAPI ko setup krny ky lye again, aap ny aik new terminal ya cmd open kr lena hai, aur usky ander virtual env create krny ki command likhni hai (Remember venv is a must, aur industry standard bhi hai):

# agar aap pip use kr rhy hain
python -m venv myvenv

# meray pass uv hai, tou mein usky through karun ga
uv venv

Usky baad aap ny venv ko activate krna hai, is command ky through:

# windows
.venv\Scripts\activate

# linux
source .venv/bin/activate

Similarly, ismein bhi pehly humein folder structure create krna hai, aap ka folder structure kuch aisa dikhy ga:

-.venv
-models
-routes
-utils
-tests
-server.py
-readme.md
-requirements.txt
-vercel.json

Folder Structure for FastAPI

Again, add/subtract kr skty hain, apni marzi ky mutabik but, make sure ky vercel.json ki file root mein lazmi ho.

Installing Dependencies

Aab bari ati hai, dependencies install krny ki.
Dependencies mein hum FastAPI, Uvicorn, and Python dotenv ko install karein gy.

FastAPI: fastapi ko use krny ky lye.
Uvicorn: uvicorn humara server hai, aap fastapi ka server bhi use kr skty hain but, better hai ky aap uvicorn ka server hi use krein cause, production env mein ye aap ko workers ky through scalability provide krta hai.
Python-dotenv: python-dotenv hum env variables ko store karwanay ky lye use karein gy.

Tou command hai:

# pip ky sath
pip install fastapi uvicorn python-dotenv

# uv ky sath
uv pip install fastapi uvicorn python-dotenv

Isky baad apko, apni dependencies and unky versions ko aik file mein store karna hoga, tou usky lye command hai:

# pip ky sath
pip freeze > requirements.txt

# uv ky sath
uv pip freeze > requirements.txt

Joky aap ky pass kuch aisi dikhy gi:

Requirements.txt

Aap ny manually ismein koi cher char nhi karni.

Writing code

Apni main.py ya server.py, jis name sy bhi aap ny file banayi hai, usmein ja kr aap ny ye code likhna hai:

from fastapi import FastAPI

app:FastAPI = FastAPI()


@app.get("/")
def index():
    return {"message": "Hello, World"}


if __name__ == "__main__":
    import uvicorn
    uvicorn.run("main:app", reload=True)

Ab is code ko line by line samjhty hain:

1-> Sb sy pehly humny FastAPI ki class ko import karwaya hai.

app=FastAPI(): Humny FastAPI ki class ka aik object banaya hai, app ky name sy.

@app.get(): Ye python ka decorator hai, jb bhi koi “<server_url>/” hit karay ga tou isky neechy likha hua function run hoga, aur aik message, “Hello, World” return ho jaye ga.

uvicorn.run: Ye humara server hai:
main:app-> Ismein “main” humari file ka name hai, agar apki file ka name server hai, tou yahan pr “server:app” aye ga.
app: Apka object name hai, jo aap ny second line mein dya hua hai.
reload: Aap jesy hi kisi bhi file mein changes karein gy, tou server reload hoga, aur jo changes hon gy wo implement ho jayein gy.

Starting Server

Apnay terminal ya cmd jismein venv activate hai, wahan ja kr ye command run karein:

# windows
py <filename>.py
or
py main.py

# linux
python<version> <filename>.py
or
python3.10 main.py

Apkay terminal pr kuch is tarah sy arha hoga:

Server running on localhost

Vercel File

Sb sy important hai, vercel.json file, agar apko apni FastAPI, vercel pr deploy karni hai, tou ye apko chahye hogi.

Isky ander aap ny ye paste krna hai:

{
    "version": 2,
    "builds": [
        {
            "src": "main.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "main.py"
        }
    ]
}j

Isky baad aap ny isy vercel pr deploy kr dena hai. Agar apko vercel pr deploy krna nhi ata tou aap ye blog parh skty hain.

Frontend ←> Backend

Ab frontend aur backend ko connect krny ki bari agyi.

Next Js mein, aap ny page.tsx ki file mein jana hai, jahan pr aap ky pass ye code likha hai:

export default function Home() {
  return (
   <>
   </>
  );
}

Abhi ky lye hum yahin pr API call karein gy, fetch method ko use krky:

export default async function Home() {
  const response = await fetch("<server_url>", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });
  const data = await response.json();
  return (
    <>
      <div className="text-white">
        <h1>Message here:</h1>
        <p>{data.message}</p>
      </div>
    </>
  );
}

Sb sy pehly aap ny function ko “async” karna hai, usky baad aap ny fetch ka method call krna hai.

server_url: Jb aap ny fastapi ko vercel pr deploy kya hoga tou usny aap ko aik domain di hogi, wohi server_url hai, it will be something like:
“https://server_url.vercel.app”.

method: Server mein aap ny decorator mein ye line dekhi hogi:

@app.get

Yahan pr get method hai, agar apko GET, POST methods ky baray mein parhna hai, tou ye blog parh sakty hain.

headers: Ye backend ko bata rha hai, ky frontend ko data kis format mein chahye, aur wo hai JSON format.

Running frontend

Frontend ko start krny ky lye, apnay terminal ya cmd mein command likhein:

# npm
npm run dev

# pnpm
pnpm run dev

Aur aapky pass output mein kuch ye aye ga:

Output message

That’s it!

Aglay blog mein miltay hain, Python aur TypeScript mein kuch zabardast krty hain.