App Router এর একটি বিল্ট-ইন Metadata API রয়েছে SEO ট্যাগের জন্য (<title>, <meta>, Open Graph, ইত্যাদি) — আপনি একটি layout.tsx বা page.tsx থেকে মেটাডেটা এক্সপোর্ট করেন এবং Next.js সঠিক <head> ট্যাগ রেন্ডার করে।
App Router এর একটি বিল্ট-ইন Metadata API রয়েছে SEO ট্যাগের জন্য (<title>, <meta>, Open Graph, ইত্যাদি) — আপনি একটি layout.tsx বা page.tsx থেকে মেটাডেটা এক্সপোর্ট করেন এবং Next.js সঠিক <head> ট্যাগ রেন্ডার করে।
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js এক্সপোর্ট করা metadata অবজেক্টটি পড়ে এবং <title>, <meta name="description">, OG ট্যাগ ইত্যাদি জেনারেট করে — কোনো ম্যানুয়াল <head> এডিটিং এর প্রয়োজন নেই।
এমন পেজের জন্য যাদের শিরোনাম ফেচ করা কন্টেন্টের উপর নির্ভর করে (একটি ব্লগ পোস্ট, একটি প্রোডাক্ট), একটি async generateMetadata ফাংশন এক্সপোর্ট করুন:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
এটি সার্ভারে চলে এবং প্রতিটি ডায়নামিক পেজের নির্ভুল, কন্টেন্ট-স্পেসিফিক মেটাডেটা থাকতে দেয় — SEO এবং ডায়নামিক কন্টেন্টের সোশ্যাল শেয়ারিংয়ের জন্য অপরিহার্য।
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
লেআউটে সংজ্ঞায়িত মেটাডেটা চাইল্ড পেজের সাথে মার্জ করা হয় (এবং সেগুলি দ্বারা ওভাররাইড করা যায়) — তাই আপনি সাইট-ওয়াইড ডিফল্ট একবার সেট করেন এবং যেখানে প্রয়োজন সেখানে পার-পেজ মান সেট করেন। template স্বয়ংক্রিয়ভাবে সাইট নাম যোগ করে।
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
বিশেষ ফাইলগুলি স্বয়ংক্রিয়ভাবে সম্পর্কিত মেটাডেটা/রুট জেনারেট করে।
ভালো মেটাডেটা SEO এবং সোশ্যাল-শেয়ার প্রিভিউ চালিত করে।
Metadata API এটিকে ডিক্লেরেটিভ এবং টাইপ-সেফ করে তোলে — স্থির পেজের জন্য স্ট্যাটিক metadata, ডেটা-চালিত পেজের জন্য async generateMetadata, এবং টেমপ্লেট সহ লেআউট-লেভেল ডিফল্ট — ম্যানুয়াল <head> ম্যানেজমেন্টকে একটি পরিষ্কার, সার্ভার-রেন্ডার সিস্টেমের সাথে প্রতিস্থাপন করে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন