Guide 3.1: Developer Guide
Build a Next.js Exam Prep App
For a more advanced application, you can use React and Next.js. We will leverage the V2 and V4 endpoints to build an app that not only shows questions but also displays rich metadata (difficulty, topics) and suggests similar questions for continuous learning.
Step 1: Initialize Next.js Project
3.1.1Start by scaffolding a new Next.js app and installing the SdashAPI SDK.
npx create-next-app@latest exam-prep cd exam-prep npm install @sdashapis/sdk
Step 2: Fetch Data with V2 Metadata
3.1.2In your Next.js page (e.g., app/page.js), use Server Components to securely fetch the data along with tags and difficulty.
import { SdashAPI } from '@sdashapis/sdk';
// Initialize SDK (Server-side only)
const api = new SdashAPI({ apiKey: process.env.SDASH_API_KEY });
export default async function QuizPage() {
// Fetch a question using the V2 endpoint for metadata
const res = await fetch('https://sdashapi.com/api/v2/q?type=wassce&subject=biology&limit=1', {
headers: { 'AccessToken': process.env.SDASH_API_KEY }
});
const data = await res.json();
const question = data.data;
return (
<main className="p-8 max-w-2xl mx-auto">
<div className="flex gap-2 mb-4">
<span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
{question.metadata?.topic || 'General'}
</span>
<span className="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">
Difficulty: {question.metadata?.difficulty || 'Unknown'}
</span>
</div>
<h1 className="text-xl font-bold mb-6">{question.question}</h1>
<div className="space-y-3">
{Object.entries(question.option).map(([key, val]) => (
val && (
<div key={key} className="p-4 border rounded hover:bg-gray-50 cursor-pointer">
<strong>{key.toUpperCase()}.</strong> {val}
</div>
)
))}
</div>
</main>
);
}Step 3: Load Similar Questions with V4
3.1.3Once a user answers a question, it's highly effective to test them on the same concept again. Use our V4 intelligence endpoint to fetch similar questions dynamically.
async function getSimilarQuestions(questionId) {
const res = await fetch(`https://sdashapi.com/api/v4/similar?id=${questionId}&limit=3`, {
headers: { 'AccessToken': process.env.SDASH_API_KEY }
});
const json = await res.json();
return json.data;
}
// Inside your component, after evaluating the answer:
// const similar = await getSimilarQuestions(question.id);
// Render 'similar' list for continuous practice.