add metadata

README.md

@@ -783,10 +783,47 @@ export const { auth, signIn, signOut } = NextAuth({
     },
   })],
 });
-````
+```
 
 More details about the authentication can be found in the [Next.js course](https://nextjs.org/learn/dashboard-app/adding-authentication).
 
+## Metadata
+Metadata can be defined by adding and exporting a metadata const to the `layout.tsx` file.
+```tsx
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Acme Dashboard',
+  description: 'The official Next.js Course Dashboard, built with App Router.',
+  metadataBase: new URL('http://localhost:3000/dashboard'),
+}
+```
+
+The metadata defined in `layout.tsx` will be used globally across all pages. They can also be overwritten for a specific page by adding the metadata const to those page's `page.tsx`-File.
+
+It's also possible to use templates in metadata, so things like the app's name can be set globally but the page title is indivudal.
+```tsx
+import { Metadata } from 'next';
+ 
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme Dashboard',
+    default: 'Acme Dashboard',
+  },
+  description: 'The official Next.js Learn Dashboard built with App Router.',
+  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
+};
+```
+
+With this template the following title is just enough per page.
+```tsx
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Invoices',
+};
+```
+
 
 ## Ressources
 - [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation)

dashboard-app-course/app/dashboard/(overview)/page.tsx

@@ -5,6 +5,11 @@ import { lusitana } from '../../ui/fonts';
 import { Suspense } from 'react';
 import { RevenueChartSkeleton, LatestInvoicesSkeleton, CardsSkeleton, CardSkeleton} from '@/app/ui/skeletons';
 import CardWrapper from '@/app/ui/dashboard/cards';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+};
 
 export default async function Page(){
     return (

dashboard-app-course/app/dashboard/customers/page.tsx

@@ -1,3 +1,9 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Customers',
+};
+
 export default function Page(){
     return <p>Customers Page</p>
 }

dashboard-app-course/app/dashboard/invoices/[id]/edit/page.tsx

@@ -2,6 +2,11 @@ import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchCustomers, fetchInvoiceById } from '@/app/lib/data';
 import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Edit invoice',
+};
 
 export default async function Page(props: {
     params: Promise<{

dashboard-app-course/app/dashboard/invoices/create/page.tsx

@@ -1,6 +1,11 @@
 import Form from '@/app/ui/invoices/create-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchCustomers } from '@/app/lib/data';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'New invoice',
+};
 
 export default async function Page(){
     const customers = await fetchCustomers();

dashboard-app-course/app/dashboard/invoices/page.tsx

@@ -6,6 +6,11 @@ import { lusitana } from "@/app/ui/fonts";
 import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
 import { Suspense } from "react";
 import { fetchInvoicesPages } from "@/app/lib/data";
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Invoices',
+};
 
 export default async function Page(props: {
     searchParams?: Promise<{

dashboard-app-course/app/layout.tsx

@@ -1,5 +1,15 @@
 import '@/app/ui/global.css';
 import {inter} from '@/app/ui/fonts';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Acme Dashboard',
+    default: 'Acme Dashboard',
+  },
+  description: 'The official Next.js Course Dashboard, built with App Router.',
+  metadataBase: new URL('http://localhost:3000/dashboard'),
+}
 
 export default function RootLayout({
   children,

dashboard-app-course/app/login/page.tsx

@@ -1,6 +1,11 @@
 import AcmeLogo from "../ui/acme-logo";
 import LoginForm from "../ui/login-form";
 import { Suspense } from "react";
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Login',
+};
 
 export default function LoginPage(){
     return (