add metadata

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 (