i am using next.js and i put some meta tags in app.jsx and i can update them through the pages with Head tag using SSR and they works fine in page inspect but they don't appear in view page source unless i put them in _document.jsx but in this case they don't update through the pages
here is my _app.jsx:
<>
<Head>
<title>{pageProps.title}</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"
/>
<link
rel="icon"
href="/TatweerLogoLTLargcopy1.svg"
></link>
{/* google Analytics to app */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=G-C2KYBGRW2E`}
/>
</Head>
<CookiesProvider>
<Provider store={store}>
<GoogleOAuthProvider clientId="App-id">
<ThemeProvider theme={theme}>
<LanguageProvider>
<CssBaseline />
<MenuAppBar />
<ToastContainer time={3000}>
<Component {...pageProps} />
</ToastContainer>
<Footer />
</LanguageProvider>
</ThemeProvider>
</GoogleOAuthProvider>
</Provider>
</CookiesProvider>
</>
and this is my getServerSideProps:
export async function getServerSideProps(context) {
const { params, locale } = context;
const cookies = cookie.parse(
(context.req && context.req.headers.cookie) || ""
);
const user = cookies.token;
const { id } = params;
const res =
isServerReq &&
(await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/course/GetCourseById/${id}?reservedLangId=1&language=${locale}`,
{
method: "GET",
credentials: "include",
headers: { Cookie: user },
}
));
const course = await res?.json();
return { props: { data: course, title: course.name } };
}