Back
Help in Next Js Server side rendering
When i call api from next js client to next js server comonent , it says user is not autheriged , will i have to pass anything else with data ?
this is server side api component ,
TypeScript
import type { NextApiRequest, NextApiResponse } from 'next';
import { Account, Client,Databases } from "appwrite";
import { AppwriteConfig } from "../../../config/appwrite.config";
const getAllCourses = async () => {
try {
var client=new Client();
client
.setEndpoint(AppwriteConfig.endpoint)
.setProject(AppwriteConfig.projectId);
var databases=new Databases(client);
const response = await databases.listDocuments(
AppwriteConfig.databaseId,
AppwriteConfig.courseCollectionId,
);
return response.documents;
return null;
} catch (error) {
console.error('Error getting documents: ', error);
return [];
}
};
export default async (req: NextApiRequest, res: NextApiResponse) => {
if (req.method === 'GET') {
const courses = await getAllCourses();
res.status(200).json(courses);
} else {
res.status(405).json({ message: 'Method not allowed' });
}
};
and this is how we call from client component ,
TypeScript
const fetchCourses = async () => {
try {
const response = await axios.get("/api/courses/all");
console.log(response.data)
setCourses(response.data);
} catch (error) {
console.error("Error fetching courses:", error);
}
};
fetchCourses();
}, []);```
i have user login data in client component , what i have to pass to make it authoriged ?
TL;DR
Developers are facing authorization issues when calling an API from a Next.js client to a server-side component. To resolve this, the user's login data needs to be passed along with the data in the client component to ensure authorization.