route.tsx
-------------
import { NextRequest, NextResponse } from "next/server";
/*
Restful verbs as methods
GET
POST
PUT
PATCH
DELETE
*/
// Request
export function GET(request : NextRequest){
return NextResponse.json(
{
heroes: [
{
id : 1,
name: "Chhatrapati Shivaji Maharaj",
era: "1630",
region: "Maharashtra",
known_for: [
"Founder of the Maratha Empire",
"Guerrilla warfare",
"Fort strategy",
],
weapons: ["Talwar", "Dandpatta", "Tiger claws"],
photo: "poster/Chhatrapati Shivaji Maharaj.png",
},
{
id : 2,
name: "Rani Lakshmibai",
era: "1828",
region: "Jhansi",
known_for: ["Revolt of 1857", "Fearless combat"],
weapons: ["Sword", "Shield"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 3,
name: "Onake Obavva",
era: "18th century",
region: "Chitradurga, Karnataka",
known_for: [
"Single-handed bravery against Hyder Ali\u2019s soldiers",
],
weapons: ["Onake (grinding pestle)"],
photo: "poster/Onake Obavva.png",
},
{
id : 4,
name: "Velu Nachiyar",
era: "1730",
region: "Tamil Nadu",
known_for: [
"First Indian queen to fight against the British",
"Early freedom struggle",
],
weapons: ["Sword", "Military strategy"],
photo: "poster/Queen Velu Nachiyar.png",
},
{
id : 5,
name: "Rani Abbakka Chowta",
era: "16th century",
region: "Ullal, Karnataka",
known_for: [
"First Tuluva queen to fight the Portuguese",
"Guerilla naval warfare",
],
weapons: ["Swords", "Spears"],
photo: "poster/Rani Abbakka.png",
},
{
id : 6,
name: "Kittur Rani Chennamma",
era: "1778",
region: "Karnataka",
known_for: ["First queen to fight British rule"],
weapons: ["Sword", "Dagger"],
photo: "poster/Kittur Rani Chennamma.png",
},
{
id : 7,
name: "Kanhoji Angre",
era: "1698",
region: "Konkan Coast",
known_for: ["Indian naval commander", "Fearless sea battles"],
weapons: ["Naval cannons", "Swords"],
photo: "poster/Kanhoji Angre.png",
},
{
id : 8,
name: "Pazhassi Raja",
era: "1753",
region: "Kerala",
known_for: ["Lion of Kerala", "Revolt against British"],
weapons: ["Swords", "Bow and arrow"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 9,
name: "Thiruppur Kumaran",
era: "1904",
region: "Tamil Nadu",
known_for: ["Freedom struggle", "Flag martyr"],
weapons: ["Unarmed bravery"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 10,
name: "Jhalkari Bai",
era: "19th century",
region: "North India",
known_for: [
"Disguised as Rani Lakshmibai to confuse British forces",
],
weapons: ["Sword", "Shield"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 11,
name: "U Kiang Nangbah",
era: "1820",
region: "Meghalaya",
known_for: ["Leader of Khasi resistance against British"],
weapons: ["Spears", "Traditional blades"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 12,
name: "Maharana Pratap",
era: "1540",
region: "Rajasthan",
known_for: ["Battle of Haldighati"],
weapons: ["Spear", "Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 13,
name: "Tantia Tope",
era: "1814",
region: "India",
known_for: ["Revolt of 1857"],
weapons: ["Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 14,
name: "Rajendra Chola I",
era: "1012",
region: "Tamil Nadu",
known_for: ["Chola naval empire"],
weapons: ["Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 15,
name: "Bajirao I",
era: "1700",
kingdom: "Maratha Empire",
known_for: [
"Unbeaten warrior",
"Cavalry tactics",
"Maratha expansion",
],
weapons: ["Spear", "Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 16,
name: "Veerapandiya Kattabomman",
era: "1760",
kingdom: "Panchalankurichi",
known_for: ["Early British resistance"],
weapons: ["Spear", "Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 17,
name: "Prithviraj Chauhan",
era: "1149",
kingdom: "Ajmer & Delhi",
known_for: ["Battle of Tarain", "Master archer"],
weapons: ["Bow", "Sword"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 18,
name: "Guru Gobind Singh Ji",
era: "1666",
kingdom: "Sikh Empire",
known_for: ["Khalsa founder", "Warrior saint"],
weapons: ["Swords", "Daggers"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 19,
name: "Harihara I & Bukka Raya I",
era: "1336",
kingdom: "Vijayanagara Empire",
known_for: ["Founders of Vijayanagara"],
weapons: ["Swords"],
photo: "poster/Rani Lakshmibai.png",
},
{
id : 20,
name: "Lachit Borphukan",
era: "1622",
kingdom: "Ahom Kingdom",
known_for: ["Battle of Saraighat", "Assamese pride"],
weapons: ["Sword", "Dagger"],
photo: "poster/Rani Lakshmibai.png",
},
],
},
{
status: 201,
}
);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
page.tsx
-------------
import Image from "next/image";
interface IHero{
id : number;
name: string;
era: string;
region: string;
known_for: string[];
weapons: string[];
photo: string;
}
export default async function Home() {
const raw = await fetch("http://localhost:3000/api/heroes");
const data = await raw.json();
return <div>
<h2>API Calls in NextJS</h2>
{/* <ol>{ data.heroes.map((val:IHero) => <li key={val.id}>{val.name}</li>) }</ol> */}
<div className="overflow-x-auto rounded-box border border-base-content/5 bg-base-100">
<table className="table">
<thead>
<tr>
<th>Sl #</th>
<th>Poster</th>
<th>Name</th>
<th>Era</th>
<th>Region</th>
<th>Weapons</th>
<th>Known For</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>
<Image alt="warrior" width={150} height={100} src={"/poster/Rani Lakshmibai.jpg"} />
{/* alt width height src */}
</td>
<td>Rani Lakshmibai</td>
<td>2025</td>
<td>Bangalore</td>
<td>Weapons List</td>
<td>Talents List</td>
</tr>
</tbody>
</table>
</div>
</div>
}