16 - Adding Metadata

README.md

@@ -29,6 +29,12 @@ The tutorials where not really designed to be done in the same repo, so the base
 
 Part of this tutorial was to deploy it out to vercel. It was very slick.I took the liberty of putting it on a custom domain and you can find it there 👉 [next-js-dashboard.curle.io](https://next-js-dashboard.curle.io)
 
+To login, use
+```
+user@nextmail.com
+123456
+```
+
 
 1. [Getting Started ♻️][2-1]  
 2. [CSS Styling ♻️][2-2]
@@ -43,9 +49,9 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 11. [Adding Search and Pagination ♻️][2-11]
 12. [Mutating Data️ ♻️][2-12]
 13. [Handling Errors ♻️][2-13]
-14. Improving Accessibility 🚧 
-15. Adding Authentication 🚧  
-16. Adding Metadata 🚧️ 
+14. [Improving Accessibility ♻️][2-14]
+15. [Adding Authentication ♻️][2-15] 
+16. [Adding Metadata ♻️][2-16] 
 
 
 [2-1]: https://github.com/treejamie/next-js-learn/pull/7
@@ -59,4 +65,7 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-9]: https://github.com/treejamie/next-js-learn/pull/17
 [2-11]: https://github.com/treejamie/next-js-learn/pull/19
 [2-12]: https://github.com/treejamie/next-js-learn/pull/20
-[2-13]: https://github.com/treejamie/next-js-learn/pull/23
+[2-13]: https://github.com/treejamie/next-js-learn/pull/23
+[2-14]: https://github.com/treejamie/next-js-learn/pull/25
+[2-15]: https://github.com/treejamie/next-js-learn/pull/28
+[2-16]: https://github.com/treejamie/next-js-learn/pull/29

app-router/nextjs-dashboard/README.md

@@ -6,6 +6,12 @@
 
 Part of this tutorial was to deploy it out to vercel. It was very slick.I took the liberty of putting it on a custom domain and you can find it there 👉 [next-js-dashboard.curle.io](https://next-js-dashboard.curle.io)
 
+To login, use
+```
+user@nextmail.com
+123456
+```
+
 
 1. [Getting Started ♻️][2-1]  
 2. [CSS Styling ♻️][2-2]
@@ -22,7 +28,7 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 13. [Handling Errors ♻️][2-13]
 14. [Improving Accessibility ♻️][2-14]
 15. [Adding Authentication ♻️][2-15] 
-16. Adding Metadata 🚧️ 
+16. [Adding Metadata ♻️][2-16] 
 
 
 [2-1]: https://github.com/treejamie/next-js-learn/pull/7
@@ -38,4 +44,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-12]: https://github.com/treejamie/next-js-learn/pull/20
 [2-13]: https://github.com/treejamie/next-js-learn/pull/23
 [2-14]: https://github.com/treejamie/next-js-learn/pull/25
-[2-15]: https://github.com/treejamie/next-js-learn/pull/28
+[2-15]: https://github.com/treejamie/next-js-learn/pull/28
+[2-16]: https://github.com/treejamie/next-js-learn/pull/29

app-router/nextjs-dashboard/app/dashboard/(overview)/page.tsx

@@ -5,6 +5,14 @@ import { lusitana } from '@/app/ui/fonts';
 import { fetchLatestInvoices, fetchCardData } from '@/app/lib/data';
 import { Suspense } from 'react';
 import { RevenueChartSkeleton } from '@/app/ui/skeletons';
+import { Metadata } from 'next';
+
+
+export const metadata: Metadata = {
+  title: 'It\'s the dashboard!',
+};
+
+
 
 export default async function Page() {
   const latestInvoices = await fetchLatestInvoices();

app-router/nextjs-dashboard/app/dashboard/customers/page.tsx

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

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

@@ -2,6 +2,12 @@ import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchInvoiceById, fetchCustomers } 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<{ id: string }> }) {

app-router/nextjs-dashboard/app/dashboard/invoices/create/page.tsx

@@ -1,15 +1,24 @@
 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: 'Create Invoice',
+};
+
+
+
 export default async function Page() {
   const customers = await fetchCustomers();
 
   return (
     <main>
       <Breadcrumbs
         breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' }, // that's going to break at somepoint
+          { label: 'Invoices', href: '/dashboard/invoices' }, // that's going to break at some
           {
             label: 'Create Invoice',
             href: '/dashboard/invoices/create',  // this smells a bit - is there a way to not do this?

app-router/nextjs-dashboard/app/dashboard/invoices/page.tsx

@@ -7,7 +7,14 @@ 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<{
     query?: string;

app-router/nextjs-dashboard/app/dashboard/layout.tsx

@@ -1,4 +1,8 @@
 import SideNav from "@/app/ui/dashboard/sidenav";
+import { Metadata } from 'next';
+
+
+
 
 export default function Layout({children}: {children: React.ReactNode}){
     return (

app-router/nextjs-dashboard/app/layout.tsx

@@ -1,5 +1,16 @@
 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 Learn Dashboard built with App Router.',
+  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
+};
+
 
 export default function RootLayout({
   children,

app-router/nextjs-dashboard/app/login/page.tsx

@@ -1,7 +1,15 @@
 import AcmeLogo from '@/app/ui/acme-logo';
 import LoginForm from '@/app/ui/login-form';
 import { Suspense } from 'react';
-
+import { Metadata } from 'next';
+
+
+export const metadata: Metadata = {
+  title: 'Login',
+};
+
+
+
 export default function LoginPage() {
   return (
     <main className="flex items-center justify-center md:h-screen">