I need some suggestions related to the implementation of the following use case in NextJS.
After the user has logged in, I am saving all the details including the token in a session (next-auth session). And now I have a sidebar that I want to render on the server side. But its content will be dynamic as it can be changed based on which user has logged in. For this I thought to go with getServerSideProps but, it isn't working. Not even logging the message.
//File path : src/app/components/Sidebar/index.tsx
import { options } from '@/app/api/auth/[...nextauth]/options';
import { getServerSession } from 'next-auth/next';
import React from 'react';
async function index(props: any) {
console.log('this is props', props);
return <div>This is Sidebar</div>;
}
export default index;
export async function getServerSideProps() {
//Can't even see this log in terminal or browser's console
console.log('Control is in getServerSideProps');
const session = await getServerSession(options);
//based on session I can make api call
//need to pass token into header for that api call
return {
props: {
session,
},
};
}
What am I doing wrong? Whatever I'm trying, is it even good or possible?
Folder structure: