[TIL] Next.js Adding metadata
Dec 15, 2023 | Jun 21, 2024
| Ryoon.With.Wisdomtrees
Adding metadata
Next.js has a Metadata API that can be used to define your application metadata. There are two ways you can add metadata to your application:
- Config-based: Export a static
metadataobject or a dynamicgenerateMetadatafunction in alayout.jsorpage.jsfile.
- File-based: Next.js has a range of special files that are specifically used for metadata purposes:
favicon.ico,apple-icon.jpg, andicon.jpg: Utilized for favicons and iconsopengraph-image.jpgandtwitter-image.jpg: Employed for social media imagesrobots.txt: Provides instructions for search engine crawlingsitemap.xml: Offers information about the website's structure
Page specific하게 metadata 적용하기
Instead, you can use the
title.template field in the metadata object to define a template for your page titles. This template can include the page title, and any other information you want to include.The
%s in the template will be replaced with the specific page title.Now, in your
/dashboard/invoices page, you can add the page title: 뒤로