New product features | The latest in technology | The weekly debugging nightmares & more!
Metadata guide in Next js 13
July 25, 2023
Nader Elmahdy
Take my knowledge and shove it up your brain...
Next 13 introduced a new way to optimize your metadata, here's what you need to know
Unlike in Next js 12 where you'd have a head component that contains your metadata, Next js 13 has a different way to add metadata.
Static pages
Generating metadata for static pages can simply be done by exporting an object called metadata and providing your page data.
page.tsx
1export const metadata = {
2 metadataBase: new URL("https://yourdomain.com"),
3 title: "page title",
4 description: "page description",
5 openGraph: {
6 title: "page title",
7 type: "website",
8 locale: "en_US",
9 url: "https://yourdomain.com",
10 siteName: "site name",
11 images: [
12 {
13 url: "your site logo",
14 width: 800,
15 height: 600,
16 alt: "site name",
17 },
18 ],
19 },
20};
Dynamic pages
Dynamic pages have a bit different way to generate metadata.
If you don't know what dynamic pages are, let's say I have some products and each product has its own page (/products/[id]/page.tsx).
page.tsx is a dynamic page.
page.tsx
1export async function generateMetadata({ params }: { params: { id: string } }) {
2 try {
3 const product = await prisma.product.findUnique({
4 where: { id: params.id },
5 });
6 if (!product)
7 return { title: "Not found", description: "This product does not exist" };
8 return {
9 title: product?.Title,
10 description: product?.Description,
11 alternates: {
12 canonical: `products/${product?.id}`,
13 },
14 twitter: {
15 card: "summary_large_image",
16 site: "@naderexpress",
17 title: product?.Title,
18 description: product?.Description,
19 images: [product?.mainImg || ""],
20 },
21 openGraph: {
22 title: product?.Title,
23 images: [
24 {
25 url: product?.mainImg || "",
26 width: 800,
27 height: 600,
28 },
29 ],
30 },
31 };
32 } catch (error) {
33 return {
34 title: "Not found",
35 description: "This product does not exist",
36 };
37 }
38}
It's straightforward, you can just copy-paste the above codes and modify them.
Sitemap
Sitemap is very important for SEO as well, here's how to do it:
in your app folder, create a sitemap.ts file.
The sitemap file should generate routes for all the dynamic pages, in my case I have products and categories, so my code looks something like this:
sitemap.ts
1import { prisma } from "@/lib/prisma";
2export default async function getSitemap() {
3 const baseUrl = "https://www.naderexpress.vercel.app";
4 const products = await prisma.product.findMany({
5 select: {
6 Title: true,
7 },
8 });
9 const productsUrls =
10 products.map((product) => {
11 return {
12 url: `${baseUrl}/product/${product.Title}`,
13 changefreq: "weekly",
14 priority: 0.7,
15 lastModified: new Date().toISOString(),
16 };
17 }) ?? [];
18 const categories = await prisma.category.findMany({
19 select: {
20 label: true,
21 },
22 });
23 const categoriesUrls =
24 categories.map((category) => {
25 return {
26 url: `${baseUrl}/category/${category.label}`,
27 changefreq: "weekly",
28 priority: 0.7,
29 lastModified: new Date().toISOString(),
30 };
31 }) ?? [];
32 return [
33 {
34 url: baseUrl,
35 changefreq: "weekly",
36 priority: 1,
37 lastModified: new Date().toISOString(),
38 },
39 ...productsUrls,
40 ...categoriesUrls,
41 ];
42}
43
You might also like:
Next js 13 group routes is a game changer
This is a new feature in next js 13 that solves so many problems
Next js 13 Route handlers explained
Forget the old api routes, this is the way
All you need to know about useOptimistic hook in Next js13
A new experimental feature from Next js 13 that will greatly imporove your UX
Next js 13 server actions introduction
Who needs api endpoints when we have server actions ?