From 7321282651a1320f4398b71aa1cb7e7801ae890d Mon Sep 17 00:00:00 2001 From: treejamie Date: Tue, 8 Apr 2025 17:14:11 +0100 Subject: [PATCH 1/2] updated readme --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ddc6245..4e76510 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,19 @@ This repo contains all of the code artefacts from following along with the tutorials on nextjs.org. -* [React Foundations](https://nextjs.org/learn/react-foundations) (_completed_) +### [React Foundations](https://nextjs.org/learn/react-foundations) + +1. About React and Next.js +2. Rendering User Interfaces (UI) +3. Updating UI with JavaScript +4. Getting Started with React +5. Building UI with Components +6. Displaying Data with Props +7. Adding Interactivity with State +8. From React to Next.js +9. Installing Next.js +10. Server and Client Components ✅ + + * [App Router](https://nextjs.org/learn/dashboard-app/getting-started) (_current_) From bf1a89ce29a1c9fd792c7b99c2b72cf11dbcdb1a Mon Sep 17 00:00:00 2001 From: treejamie Date: Tue, 8 Apr 2025 17:58:29 +0100 Subject: [PATCH 2/2] Data has been fetched --- README.md | 63 +++++++++++++++---- .../nextjs-dashboard/app/dashboard/page.tsx | 42 ++++++++++++- .../app/ui/dashboard/latest-invoices.tsx | 4 +- .../app/ui/dashboard/revenue-chart.tsx | 12 ++-- 4 files changed, 98 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 4e76510..135fd29 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,58 @@ This repo contains all of the code artefacts from following along with the tutorials on nextjs.org. -### [React Foundations](https://nextjs.org/learn/react-foundations) +The tutorials where not really designed to be done in the same repo, so the base directories for each need to be alterered if they are to be deployed. -1. About React and Next.js -2. Rendering User Interfaces (UI) -3. Updating UI with JavaScript -4. Getting Started with React -5. Building UI with Components -6. Displaying Data with Props -7. Adding Interactivity with State -8. From React to Next.js -9. Installing Next.js -10. Server and Client Components ✅ +### [React Foundations](https://nextjs.org/learn/react-foundations) ✅ +1. About React and Next.js (_theory - no code_) +2. Rendering User Interfaces (UI) (_theory - no code_) +3. Updating UI with JavaScript (_theory - no code_) +4. [Getting Started with React ♻️][1-4] +5. [Building UI with Components ♻️][1-4] +6. [Displaying Data with Props ♻️][1-6] +7. [Adding Interactivity with State ♻️][1-7] +8. [From React to Next.js ♻️][1-89] +9. [Installing Next.js ♻️][1-89] +10. [Server and Client Components ♻️][1-10] -* [App Router](https://nextjs.org/learn/dashboard-app/getting-started) (_current_) +[1-4]: https://github.com/treejamie/next-js-learn/pull/1 +[1-5]: https://github.com/treejamie/next-js-learn/pull/2 +[1-6]: https://github.com/treejamie/next-js-learn/pull/3 +[1-7]: https://github.com/treejamie/next-js-learn/pull/4 +[1-89]: https://github.com/treejamie/next-js-learn/pull/5 +[1-10]: https://github.com/treejamie/next-js-learn/pull/6 + +### [App Router](https://nextjs.org/learn/dashboard-app/getting-started) 🚧 + +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) + + +1. [Getting Started ♻️][2-1] +2. [CSS Styling ♻️][2-2] +3. [Optimizing Fonts and Images ♻️][2-3] +4. [Creating Layouts and Pages ♻️][2-4] +5. [Navigating Between Pages ♻️][2-5] +6. [Setting Up Your Database ♻️][2-6] +7. [Fetching Data ♻️][2-7] +8. Static and Dynamic Rendering 🚧 +9. Streaming 🚧 +10. Partial Prerendering ️🚧 +11. Adding Search and Pagination 🚧 +12. Mutating Data 🚧 +13. Handling Errors 🚧 +14. Improving Accessibility 🚧 +15. Adding Authentication 🚧 +16. Adding Metadata 🚧️ + + + + +[2-1]: https://github.com/treejamie/next-js-learn/pull/7 +[2-2]: https://github.com/treejamie/next-js-learn/pull/9 +[2-3]: https://github.com/treejamie/next-js-learn/pull/10 +[2-4]: https://github.com/treejamie/next-js-learn/pull/11 +[2-5]: https://github.com/treejamie/next-js-learn/pull/12 +[2-6]: https://github.com/treejamie/next-js-learn/pull/13 +[2-7]: https://github.com/treejamie/next-js-learn/pull/15 \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/dashboard/page.tsx b/app-router/nextjs-dashboard/app/dashboard/page.tsx index d8e8d9c..2cd53e6 100644 --- a/app-router/nextjs-dashboard/app/dashboard/page.tsx +++ b/app-router/nextjs-dashboard/app/dashboard/page.tsx @@ -1,3 +1,39 @@ -export default function Page() { - return

Dashboard Page

; - } \ No newline at end of file +import { Card } from '@/app/ui/dashboard/cards'; +import RevenueChart from '@/app/ui/dashboard/revenue-chart'; +import LatestInvoices from '@/app/ui/dashboard/latest-invoices'; +import { lusitana } from '@/app/ui/fonts'; +import { fetchRevenue, fetchLatestInvoices, fetchCardData } from '@/app/lib/data'; + +export default async function Page() { + const revenue = await fetchRevenue(); + const latestInvoices = await fetchLatestInvoices(); + const { + numberOfCustomers, + numberOfInvoices, + totalPaidInvoices, + totalPendingInvoices, + + } = await fetchCardData(); + + return ( +
+

+ Dashboard +

+
+ + + + +
+
+ + +
+
+ ); +} \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx b/app-router/nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx index 27b74f6..fb8bca9 100644 --- a/app-router/nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx +++ b/app-router/nextjs-dashboard/app/ui/dashboard/latest-invoices.tsx @@ -16,7 +16,7 @@ export default async function LatestInvoices({
{/* NOTE: Uncomment this code in Chapter 7 */} - {/*
+
{latestInvoices.map((invoice, i) => { return (
); })} -
*/} +

Updated just now

diff --git a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx index f19e698..6a2be6e 100644 --- a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx +++ b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx @@ -17,11 +17,11 @@ export default async function RevenueChart({ const chartHeight = 350; // NOTE: Uncomment this code in Chapter 7 - // const { yAxisLabels, topLabel } = generateYAxis(revenue); + const { yAxisLabels, topLabel } = generateYAxis(revenue); - // if (!revenue || revenue.length === 0) { - // return

No data available.

; - // } + if (!revenue || revenue.length === 0) { + return

No data available.

; + } return (
@@ -30,7 +30,7 @@ export default async function RevenueChart({ {/* NOTE: Uncomment this code in Chapter 7 */} - {/*
+

Last 12 months

-
*/} +
); }