OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to add dynamic metadata on [slug] page in next.js app router

  • Thread starter Thread starter Burner
  • Start date Start date
B

Burner

Guest
The documentation wasn't much help, so I came here. I am trying to add metadata for my blog posts but I cannot figure out how to do that. This is my articles/[slug]/page.tsx code shortened:


Code:
'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import fetchBlogPosts from '../../../../pages/api/get_content';
import ArticleHeader from '@/app/components/articleHeader';
import { firestore } from '../../../../firestore';
import { collection, addDoc, query, where, getDocs, Timestamp } from 'firebase/firestore';
import 'react-quill/dist/quill.snow.css';
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });


type BlogPost = {
  title: string;
  description: string;
  image?: string | null;
  content: string;
  slug: string;
  tags: Array<{ name: string }>;
};

const ArticlePage = ({ params, }: { params: { slug: string } }) => {
 
};

export default ArticlePage;

What do I need to do to have dynamic metadata?

<p>The documentation wasn't much help, so I came here. I am trying to add metadata for my blog posts but I cannot figure out how to do that. This is my articles/[slug]/page.tsx code shortened:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>'use client';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import fetchBlogPosts from '../../../../pages/api/get_content';
import ArticleHeader from '@/app/components/articleHeader';
import { firestore } from '../../../../firestore';
import { collection, addDoc, query, where, getDocs, Timestamp } from 'firebase/firestore';
import 'react-quill/dist/quill.snow.css';
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });


type BlogPost = {
title: string;
description: string;
image?: string | null;
content: string;
slug: string;
tags: Array<{ name: string }>;
};

const ArticlePage = ({ params, }: { params: { slug: string } }) => {

};

export default ArticlePage;</code></pre>
</div>
</div>
</p>
<p>What do I need to do to have dynamic metadata?</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top