├── .env.example ├── .eslintrc.json ├── .gitignore ├── .nvmrc ├── README.md ├── README_ES.md ├── app ├── dashboard │ ├── (overview) │ │ ├── loading.tsx │ │ └── page.tsx │ ├── customers │ │ └── page.tsx │ ├── invoices │ │ ├── [id] │ │ │ └── edit │ │ │ │ ├── not-found.tsx │ │ │ │ └── page.tsx │ │ ├── create │ │ │ └── page.tsx │ │ ├── error.tsx │ │ └── page.tsx │ └── layout.tsx ├── favicon.ico ├── layout.tsx ├── lib │ ├── actions.ts │ ├── data.ts │ ├── definitions.ts │ ├── placeholder-data.js │ └── utils.ts ├── login │ └── page.tsx ├── opengraph-image.png ├── page.tsx └── ui │ ├── acme-logo.tsx │ ├── button.tsx │ ├── customers │ └── table.tsx │ ├── dashboard │ ├── cards.tsx │ ├── latest-invoices.tsx │ ├── nav-links.tsx │ ├── revenue-chart.tsx │ └── sidenav.tsx │ ├── fonts.ts │ ├── global.css │ ├── home.module.css │ ├── invoices │ ├── breadcrumbs.tsx │ ├── buttons.tsx │ ├── create-form.tsx │ ├── edit-form.tsx │ ├── pagination.tsx │ ├── status.tsx │ └── table.tsx │ ├── login-form.tsx │ ├── search.tsx │ └── skeletons.tsx ├── auth.config.ts ├── auth.ts ├── middleware.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── customers │ ├── amy-burns.png │ ├── balazs-orban.png │ ├── delba-de-oliveira.png │ ├── emil-kowalski.png │ ├── evil-rabbit.png │ ├── guillermo-rauch.png │ ├── hector-simpson.png │ ├── jared-palmer.png │ ├── lee-robinson.png │ ├── michael-novotny.png │ ├── steph-dietz.png │ └── steven-tey.png ├── hero-desktop.png └── hero-mobile.png ├── scripts └── seed.js ├── tailwind.config.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | # Copy from .env.local on the Vercel dashboard 2 | # https://nextjs.org/learn/dashboard-app/setting-up-your-database#create-a-postgres-database 3 | POSTGRES_URL= 4 | POSTGRES_PRISMA_URL= 5 | POSTGRES_URL_NON_POOLING= 6 | POSTGRES_USER= 7 | POSTGRES_HOST= 8 | POSTGRES_PASSWORD= 9 | POSTGRES_DATABASE= 10 | 11 | # `openssl rand -base64 32` 12 | AUTH_SECRET= 13 | AUTH_URL=http://localhost:3000/api/auth -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Acme dashboard full web application. 2 | 3 | ![Acme full web application](https://nextjs.org/_next/image?url=%2Flearn%2Fcourse-explainer.png&w=750&q=75&dpl=dpl_Ejtt9BCyCFNeRJdBoVsM9Es9x8xe) 4 | 5 | ## Next.js App Router Course - Starter 6 | 7 | This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application. 8 | 9 | For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website. 10 | 11 | ## Creating a new project 12 | 13 | ```bash 14 | npx create-next-app@latest nextjs-dashboard --use-npm --example "https:// 15 | github.com/vercel/next-learn/tree/main/dashboard/starter-example" 16 | 17 | ``` 18 | 19 | This command uses create-next-app, a Command Line Interface (CLI) tool that sets up a Next.js application for you. In the command above, you're also using the --example flag with the starter example for this course. 20 | 21 | ## Folder structure 22 | 23 | **/app:** Contains all the routes, components, and logic for your application, this is where you'll be mostly working from. 24 | **/app/lib:** Contains functions used in your application, such as reusable utility functions and data fetching functions. 25 | **/app/ui:** Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you. 26 | **/public:** Contains all the static assets for your application, such as images. 27 | **/scripts/:** Contains a file that you'll use to populate your database in a later chapter. 28 | 29 | Config Files: You'll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. 30 | 31 | **app/lib/placeholder-data.js:** Each JavaScript object in the file represents a table in your database. For example, for the invoices table: 32 | 33 | **/app/lib/definitions.ts:** Here, we manually define the types that will be returned from the database. 34 | 35 | By using **TypeScript**, you can ensure you don't accidentally pass the wrong data format to your components or database, like passing a string to amount instead of a number. 36 | 37 | ### If you're a TypeScript developer: 38 | 39 | - Next.js detects if your project uses TypeScript and automatically installs the necessary packages and configuration. Next.js also comes with a TypeScript plugin for your code editor, to help with auto-completion and type-safety. 40 | 41 | - We're manually declaring the data types, but for better type-safety, we recommend tools like Prisma, which automatically generates types based on your database schema. 42 | 43 | ## Running the development server 44 | 45 | Run npm i or npm install to install the project's packages. 46 | 47 | ```bash 48 | npm install 49 | ``` 50 | 51 | Followed by npm run dev to start the development server. 52 | 53 | ```bash 54 | npm run dev 55 | ``` 56 | 57 | ```npm run dev``` starts your Next.js development server on port 3000. Let's check to see if it's working. Open http://localhost:3000 on your browser. 58 | 59 | ## CSS Styling 60 | 61 | In this chapter... 62 | 63 | Here are the topics we’ll cover 64 | 65 | - How to add a global CSS file to your application. 66 | 67 | - Two different ways of styling: Tailwind and CSS modules. 68 | 69 | - How to conditionally add class names with the clsx utility package. 70 | 71 | ### Global styles 72 | 73 | **/app/ui:** If you look inside folder, you'll see a file called global.css. You can use this file to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more. 74 | 75 | You can import global.css in any component in your application, but it's usually good practice to add it to your top-level component. In Next.js, this is the root layout (more on this later). 76 | 77 | > **/app/layout.tsx** 78 | ```TypeScript 79 | import '@/app/ui/global.css'; 80 | ``` 81 | 82 | If you take a look inside global.css, you'll notice some @tailwind directives. 83 | 84 | ```css 85 | @tailwind base; 86 | @tailwind components; 87 | @tailwind utilities; 88 | ``` 89 | 90 | ### Tailwind 91 | 92 | Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your JSX markup. The CSS styles are shared globally, but each utility is singularly focused and applied to each individual element. This means you don't have to worry about style collisions, maintaining separate stylesheets, or your CSS bundle size growing as your application grows. 93 | 94 | When you use create-next-app to start a new project, Next.js will ask if you want to use Tailwind. If you select yes, it will automatically install the necessary packages and configure Tailwind in your application. 95 | 96 | If you look at /app/page.tsx, you'll see that we're using Tailwind classes in the example. 97 | 98 | ```tsx 99 |
100 | ``` 101 | 102 | ### CSS Modules 103 | 104 | If you prefer writing traditional CSS rules or keeping your styles separate from your JSX, CSS Modules are a great alternative. 105 | 106 | CSS Modules allow you to scope CSS to a component by automatically creating unique class names, so you don't have to worry about name collisions. 107 | 108 | Here's how you could create the same shape from the quiz above using CSS modules. 109 | 110 | > **app/ui/home.module.css** 111 | ```css 112 | .shape { 113 | height: 0; 114 | width: 0; 115 | border-bottom: 30px solid black; 116 | border-left: 20px solid transparent; 117 | border-right: 20px solid transparent; 118 | } 119 | ``` 120 | 121 | > Provide a way to make CSS classes locally scoped to components by default, enabling better modularity and reducing the risk of styling conflicts. 122 | 123 | ### Library clsx 124 | 125 | There may be cases where you may need to conditionally style an element based on state or some other condition. 126 | 127 | - Suppose that you want to create an InvoiceStatus component which accepts status. The status can be 'pending' or 'paid'. 128 | - If it's 'paid', you want the color to be green. If it's 'pending', you want the color to be gray. 129 | 130 | You can use clsx to conditionally apply the classes, like this: 131 | 132 | ```tsx 133 | import clsx from 'clsx'; 134 | 135 | export default function InvoiceStatus({ status }: { status: string }) { 136 | return ( 137 | 146 | // ... 147 | )} 148 | ``` 149 | 150 | ## Optimizing Fonts and Images 151 | 152 | In the previous chapter, you learned how to style your Next.js application. Let's continue working on your home page by adding a custom font and a hero image. 153 | 154 | In this chapter... 155 | 156 | Here are the topics we’ll cover 157 | 158 | - ✏️ How to add custom fonts with next/font. 159 | 160 | - 🛣️ How to add images with next/image. 161 | 162 | - ✅ How fonts and images are optimized in Next.js. 163 | 164 | 165 | ### Why optimize fonts? 166 | 167 | Fonts play a significant role in the design of a website, but using custom fonts in your project can affect performance if the font files need to be fetched and loaded. 168 | 169 | Cumulative Layout Shift is a metric used by Google to evaluate the performance and user experience of a website. With fonts, layout shift happens when the browser initially renders text in a fallback or system font and then swaps it out for a custom font once it has loaded. This swap can cause the text size, spacing, or layout to change, shifting elements around it. 170 | 171 | ![Cumulative Layout Shift](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Ffont-layout-shift.png&w=1920&q=75&dpl=dpl_9EKEbD7jAviauyTffgoEyAkQSGtP) 172 | 173 | Next.js automatically optimizes fonts in the application when you use the next/font module. It does so by downloading font files at build time and hosting them with your other static assets. This means when a user visits your application, there are no additional network requests for fonts which would impact performance. 174 | 175 | ### Adding a primary font 176 | 177 | In your /app/ui folder, create a new file called fonts.ts. You'll use this file to keep the fonts that will be used throughout your application. 178 | 179 | Import the Inter font from the next/font/google module - this will be your primary font. 180 | Then, specify what subset you'd like to load. In this case, 'latin': 181 | 182 | ```tsx 183 | import { Inter } from 'next/font/google'; 184 | 185 | export const inter = Inter({ subsets: ['latin'] }); 186 | ``` 187 | 188 | Finally, add the font to the element in /app/layout.tsx 189 | 190 | By adding Inter to the element, the font will be applied throughout your application. Here, you're also adding the Tailwind antialiased class which smooths out the font. It's not necessary to use this class, but it adds a nice touch to your fonts. 191 | 192 | ```css 193 | .antialiased { 194 | -webkit-font-smoothing: antialiased; 195 | -moz-osx-font-smoothing: grayscale; 196 | } 197 | ``` 198 | 199 | ```tsx 200 | {children} 201 | ``` 202 | 203 | > You can also add fonts to specific elements of your application. 204 | 205 | --- 206 | 207 | ### Why optimize images? 208 | 209 | Next.js can serve static assets, like images, under the top-level /public folder. Files inside /public can be referenced in your application. 210 | 211 | If you look inside the folder, you'll see there's are two images: hero-desktop.png and hero-mobile.png. These two images are completely different, and they'll be shown depending on the user's device is a desktop or mobile. 212 | 213 | With regular HTML, you would add an image as follows: 214 | 215 | ```tsx 216 | Screenshots of the dashboard project showing desktop and mobile versions 217 | ``` 218 | 219 | However, this means you have to manually: 220 | 221 | - Ensure your image is responsive on different screen sizes. 222 | - Specify image sizes for different devices. 223 | - Prevent layout shift as the images load. 224 | - Lazy load images that are outside the user's viewport. 225 | 226 | Instead of manually handling these optimizations, you can use the ```next/image``` component to automatically optimize your images. 227 | 228 | ### The \ component 229 | 230 | The \ Component is an extension of the HTML \ tag, and comes with automatic image optimization, such as: 231 | 232 | - Preventing layout shift automatically when images are loading. 233 | - Resizing images to avoid shipping large images to devices with a smaller viewport. 234 | - Lazy loading images by default (images load as they enter the viewport). 235 | - Serving images in modern formats, like WebP and AVIF, when the browser supports it. 236 | 237 | ### Adding the desktop hero image 238 | 239 | Let's swap the \ tag for an \ component. 240 | 241 | In your /app/page.tsx file, import the component from next/image. Then, add the image under the comment: 242 | 243 | ```tsx 244 | Screenshots of the dashboard project showing desktop and mobile versions 251 | ``` 252 | 253 | Here, you're setting the width to 1000 and height to 760 pixels. It's good practice to set the width and height of your images to avoid layout shift, these should be an aspect ratio identical to the source image. 254 | 255 | ### Adding the mobile hero image 256 | 257 | Now it's your turn again! Under the image you've just added, add another component for the mobile hero. 258 | 259 | - The image should have a width of 560 and height of 620 pixels. 260 | - It should be shown on mobile screens, and hidden on desktop. 261 | - You can use Dev Tools to check if the desktop and mobile images are swapped correctly. 262 | 263 | ```tsx 264 | Screenshot of the dashboard project showing mobile version 271 | ``` 272 | 273 | ### Recommended reading 274 | 275 | There's a lot more to learn about these topics, including optimizing remote images and using local font files. If you'd like to dive deeper into fonts and images, see: 276 | 277 | - [Image Optimization Docs](https://nextjs.org/docs/app/building-your-application/optimizing/images) 278 | - [Font Optimization Docs](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) 279 | - [Improving Web Performance with Images (MDN)](https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia) 280 | - [Web Fonts (MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) 281 | 282 | 283 | --- 284 | 285 | ## Creating Layouts and Pages 286 | 287 | So far, your application only has a home page. Let's learn how you can create more routes with layouts and pages. 288 | 289 | In this chapter... 290 | 291 | Here are the topics we’ll cover 292 | 293 | - Create the /login and dashboard pages using file-system routing. 294 | 295 | - Understand the role of folders and files when creating new route segments. 296 | 297 | - Create a layout that can be shared between multiple dashboard pages. 298 | 299 | - Understand what colocation, partial rendering, and root layout are. 300 | 301 | ### Nested routing 302 | 303 | Next.js uses **file-system routing** where folders are used to create nested routes. Each folder represents a route segment that maps to a URL segment. 304 | 305 | ![Nested routing](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Ffolders-to-url-segments.png&w=1920&q=75&dpl=dpl_9EKEbD7jAviauyTffgoEyAkQSGtP) 306 | 307 | page.tsx is a special Next.js file that exports a React component containing the UI for the route. In your application, you already have a page file: /app/page.tsx - this is the home page which is associated with the route /. 308 | 309 | To create a nested route, you can nest folders inside each other with their own page.tsx files. For example: 310 | 311 | ![Nest folders inside](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Flogin-route.png&w=1920&q=75&dpl=dpl_9EKEbD7jAviauyTffgoEyAkQSGtP) 312 | 313 | /app/login/page.tsx is associated with the /login path. Let's create the page to see how it works! 314 | 315 | ### Creating the dashboard page 316 | 317 | Create a new folder called dashboard inside /app. Then, create a new page.tsx file inside the dashboard folder with the following content: 318 | 319 | ```tsx 320 | export default function Page() { 321 | return

Dashboard Page

; 322 | } 323 | ``` 324 | Now, make sure that the development server is running and visit http://localhost:3000/dashboard. 325 | 326 | Let's practice creating more routes. In your dashboard, create two more pages: 327 | 328 | - Customers Page: The page should be accessible on http://localhost:3000/dashboard/customers. For now, it should return a \Customers Page\ element. 329 | 330 | - Invoices Page: The invoices page should be accessible on http://localhost:3000/dashboard/invoices. For now, also return a \Invoices Page\ element. 331 | 332 | You should have the following folder structure: 333 | 334 | ![folder structure](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Frouting-solution.png&w=1920&q=75&dpl=dpl_9EKEbD7jAviauyTffgoEyAkQSGtP) 335 | 336 | 337 | ### Creating the dashboard layout 338 | 339 | Dashboards also have some sort of navigation that is shared across multiple pages. In Next.js, you can use a special layout.tsx file to create UI that is shared between multiple pages. Let's create a layout for the dashboard! 340 | 341 | Inside the /dashboard folder, add a new file called layout.tsx and paste the following code: 342 | 343 | ```tsx 344 | import SideNav from '@/app/ui/dashboard/sidenav'; 345 | 346 | export default function Layout({ children }: { children: React.ReactNode }) { 347 | return ( 348 |
349 |
350 | 351 |
352 |
{children}
353 |
354 | ); 355 | } 356 | ``` 357 | 358 | One benefit of using layout is that on navigation, only the page components update while the layout won't re-render. In Next.js, this is called partial rendering: 359 | 360 | ![Partial rendering](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fpartial-rendering-dashboard.png&w=1920&q=75&dpl=dpl_9EKEbD7jAviauyTffgoEyAkQSGtP) 361 | 362 | This layout is required and is called a root layout. Any UI you add to the root layout will be shared across all pages in your application. You can use the root layout to modify your \ and \ tags, and add metadata (you'll learn more about metadata in a later chapter). 363 | 364 | Since the new layout you've just created (/app/dashboard/layout.tsx) is unique to the dashboard pages, you don't need to add any UI to the root layout above. 365 | 366 | 367 | ## Navigating Between Pages 368 | 369 | In the previous chapter, you created the dashboard layout and pages. Now, let's add some links to allow users to navigate between the dashboard pages. 370 | 371 | In this chapter... 372 | 373 | Here are the topics we’ll cover 374 | 375 | - How to use the next/link component. 376 | 377 | - How to show an active link with the usePathname() hook. 378 | 379 | - How client-side navigation works in Next.js. 380 | 381 | ### Why optimize navigation? 382 | 383 | To link between pages, you'd traditionally use the \ HTML element. At the moment, the sidebar links use \ elements, but notice what happens when you navigate between the home, invoices, and customers pages on your browser. 384 | 385 | Did you see it? 386 | 387 | There's a full page refresh on each page navigation! 388 | 389 | #### The \ component 390 | 391 | In Next.js, you can use the Link Component to link between pages in your application. allows you to do client-side navigation with JavaScript. Although parts of your application are rendered on the server, navigation is faster and there's no full page refresh - making it feel more like a web app. 392 | 393 | #### Pattern: Showing active links 394 | 395 | A common UI pattern is to show an active link to indicate to the user what page they are currently on. To do this, you need to get the user's current path from the URL. Next.js provides a hook called usePathname() that you can use to check the path. 396 | 397 | Since [usePathname()](https://nextjs.org/docs/app/api-reference/functions/use-pathname) is a hook, you'll need to turn nav-links.tsx into a Client Component. Add React's ```"use client" ``` directive to the top of the file, then import usePathname() from next/navigation: 398 | 399 | ### Automatic code-splitting and prefetching 400 | 401 | In addition to client-side navigation, Next.js automatically code splits your application by route segments. This is different from a traditional SPA, where the browser loads all your application code on initial load. 402 | 403 | Splitting code by routes means that pages become isolated. If a certain page throws an error, the rest of the application will still work. 404 | 405 | Furthermore, in production, whenever \ components appear in the browser's viewport, Next.js automatically prefetches the code for the linked route in the background. By the time the user clicks the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant! 406 | 407 | --- 408 | 409 | ## Setting Up Your Database 410 | 411 | Before you can continue working on your dashboard, you'll need some data. In this chapter, you'll be setting up a PostgreSQL database using @vercel/postgres. If you're already familiar with PostgreSQL and would prefer to use your own provider, you can skip this chapter and set it up on your own. Otherwise, let's continue! 412 | 413 | In this chapter... 414 | 415 | Here are the topics we’ll cover 416 | 417 | - Create and link your project to a Postgres database. 418 | 419 | - Seed the database with initial data. 420 | 421 | ### Create a Postgres database 422 | 423 | Next, to set up a database, click the Storage tab from your Vercel dashboard. Select Connect Store → Create New → Postgres → Continue. 424 | 425 | ![Vercel Postgres](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fcreate-database.png&w=1080&q=75&dpl=dpl_9qQQdh4D2Yn6grRGdiVN5fQKpqX7) 426 | 427 | Once connected, copy the contents from the .env.local tab on the database page. 428 | 429 | ![env.local](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fdatabase-dashboard.png&w=1080&q=75&dpl=dpl_9qQQdh4D2Yn6grRGdiVN5fQKpqX7) 430 | 431 | Navigate to your code editor and rename the .env.example file to .env. Paste in the copied contents from Vercel. 432 | 433 | Important: Go to your .gitignore file and make sure .env are in the ignored files to prevent your database secrets from being exposed on GitHub. 434 | 435 | Finally, run: 436 | ```bash 437 | npm i @vercel/postgres 438 | ``` 439 | in your terminal to install the Vercel Postgres SDK. 440 | 441 | ### Seed your database 442 | 443 | Now that your database has been created, let's seed it with some initial data. This will allow you to have some data to work with as you build the dashboard. 444 | 445 | In the ```/scripts``` folder of your project, there's a file called seed.js. This script contains the instructions for creating and seeding the invoices, customers, user, revenue tables. 446 | 447 | ```json 448 | "scripts": { 449 | "build": "next build", 450 | "dev": "next dev", 451 | "start": "next start", 452 | "seed": "node -r dotenv/config ./scripts/seed.js" 453 | }, 454 | ``` 455 | 456 | -r : require 457 | 458 | This is the command that will execute the seed.js. Before we can run the command, we must first npm i bcrypt, which is used to hash user passwords. 459 | 460 | Now, run npm run seed. You should see some console.log messages in your terminal to let you know the script is running. 461 | 462 | > Troubleshooting: 463 | > 464 | > If you run into any issues while seeding your database and want to run the script again, you can drop any existing tables by running DROP TABLE tablename in your database query interface. See the executing queries section below for more details. 465 | > 466 | > This command will delete the tables and all their data. But be careful, it's ok to do this with your example app since you're working with placeholder data, but you shouldn't run this command in a production app. 467 | > 468 | > If you continue to experience issues while seeding your Verce Postgres database, please open a discussion on GitHub. 469 | 470 | ### Exploring your database 471 | 472 | Let's see what your database looks like. Go back to Vercel, and click Data in the sidenav. 473 | 474 | In this section, you'll find the four new tables: users, customers, invoices, revenue. 475 | 476 | ![Data postgres Vercel](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fdatabase-tables.png&w=1080&q=75&dpl=dpl_9qQQdh4D2Yn6grRGdiVN5fQKpqX7) 477 | 478 | ### Executing queries 479 | 480 | You can switch to the "query" tab to interact with your database. This section supports standard SQL commands. For instance, inputting DROP TABLE customers will delete "customers" table along with all its data - so be careful! 481 | 482 | --- 483 | 484 | ## Fetching Data 485 | 486 | Let's discuss the different ways you can fetch data from your database, including using SQL and alternatives. 487 | 488 | Now that you've created and seeded your database, let's discuss the different ways you can fetch data for your application, and choose the most appropriate one for the dashboard overview page. 489 | 490 | In this chapter... 491 | 492 | Here are the topics we’ll cover 493 | 494 | - Learn about some approaches to fetching data: APIs, ORMs, SQL, etc. 495 | 496 | - How Server Components help us access our back-end resources more securely. 497 | 498 | - What network waterfalls are. 499 | 500 | - How to implement parallel data fetching using a JavaScript Pattern. 501 | 502 | ### Choosing how to fetch data 503 | 504 | #### API layer 505 | APIs are an intermediary layer between your application code and database. There are a few cases where you might use an API: 506 | 507 | If you're using 3rd party services that provide an API. 508 | If you're fetching data from the client, you want to have an API layer that runs on the server to avoid exposing your database secrets to the client. 509 | In Next.js, you can create API endpoints using Route Handlers. 510 | 511 | #### Database queries 512 | When you're creating a full-stack application, you'll also need to write logic to interact with your database. For relational databases like Postgres, you can do this with SQL, or an ORM like Prisma. 513 | 514 | There are a few cases where you have to write database queries: 515 | 516 | When creating your API endpoints, you need to write logic to interact with your database. 517 | If you are using React Server Components (fetching data on the server), you can skip the API layer, and query your database directly without risking exposing your database secrets to the client. 518 | 519 | There are a few other ways you can fetch data with React and Next.js. We won't cover all of them due to time. If you'd like to learn more, check out the Data Fetching docs. 520 | 521 | In the next section, we'll explore how you can fetch data using a relatively new approach: async React Server Components. 522 | 523 | ### Using Server Components to fetch data 524 | 525 | By default, Next.js applications use React Server Components, and you can opt into Client Components when needed. There are a few benefits to fetching data with React Server Components: 526 | 527 | Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client. 528 | Server Components support promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries. 529 | Since Server Components execute on the server, you can query the database directly without an additional API layer. 530 | 531 | ### Using SQL 532 | 533 | For your dashboard project, you'll write database queries using the Vercel Postgres SDK and SQL. There are a few reasons why we'll be using SQL: 534 | 535 | - SQL is the industry standard for querying relational databases (e.g. ORMs generate SQL under the hood). 536 | 537 | - Having a basic understanding of SQL can help you understand the fundamentals of relational databases, allowing you to apply your knowledge to other tools. 538 | 539 | - SQL is versatile, allowing you to fetch and manipulate specific data. 540 | 541 | - The Vercel Postgres SDK provides protection against SQL injections. 542 | 543 | > You can call sql inside any Server Component. But to allow you to navigate the components more easily, we've kept all the data queries in the data.ts file, and you can import them into the components. 544 | 545 | ## Fetching data for the dashboard overview page 546 | 547 | ```tsx 548 | import { Card } from '@/app/ui/dashboard/cards'; 549 | import RevenueChart from '@/app/ui/dashboard/revenue-chart'; 550 | import LatestInvoices from '@/app/ui/dashboard/latest-invoices'; 551 | import { lusitana } from '@/app/ui/fonts'; 552 | 553 | export default async function Page() { 554 | return ( 555 |
556 |

557 | Dashboard 558 |

559 |
560 | {/* */} 561 | {/* */} 562 | {/* */} 563 | {/* */} 568 |
569 |
570 | {/* */} 571 | {/* */} 572 |
573 |
574 | ); 575 | } 576 | ``` 577 | 578 | In the code above: 579 | 580 | Page is an async component. This allows you to use await to fetch data. 581 | There are also 3 components which receive data: \, \, and \. They are currently commented out to prevent the application from erroring. 582 | 583 | ### Fetching data for \ 584 | 585 | To fetch data for the \ component, import the fetchRevenue function from data.ts and call it inside your component 586 | 587 | ### Fetching data for \ 588 | 589 | For the component, we need to get the latest 5 invoices, sorted by date. 590 | 591 | You could fetch all the invoices and sort through them using JavaScript. This isn't a problem as our data is small, but as your application grows, it can significantly increase the amount of data transferred on each request and the JavaScript required to sort through it. 592 | 593 | Instead of sorting through the latest invoices in-memory, you can use an SQL query to fetch only the last 5 invoices. 594 | 595 | For example, this is the SQL query from your data.ts file: 596 | 597 | ```tsx 598 | // Fetch the last 5 invoices, sorted by date 599 | const data = await sql` 600 | SELECT invoices.amount, customers.name, customers.image_url, customers.email 601 | FROM invoices 602 | JOIN customers ON invoices.customer_id = customers.id 603 | ORDER BY invoices.date DESC 604 | LIMIT 5`; 605 | ``` 606 | 607 | ### Fetch data for the \ components 608 | 609 | Now it's your turn to fetch data for the \ components. The cards will display the following data: 610 | 611 | - Total amount of invoices collected. 612 | - Total amount of invoices pending. 613 | - Total number of invoices. 614 | - Total number of customers. 615 | 616 | Again, you might be tempted to fetch all the invoices and customers, and use JavaScript to manipulate the data. 617 | 618 | ```tsx 619 | const totalInvoices = allInvoices.length; 620 | const totalCustomers = allCustomers.length; 621 | ``` 622 | 623 | But with SQL, you can fetch only the data you need. It's a little longer than using Array.length, but it means less data needs to be transferred during the request. This is the SQL alternative: 624 | 625 | > /app/lib/data.ts 626 | ```tsx 627 | const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`; 628 | const customerCountPromise = sql`SELECT COUNT(*) FROM customers`; 629 | ``` 630 | 631 | The function you will need to import is called fetchCardData. You will need to destructure the values returned from the function. 632 | 633 | Hint: 634 | 635 | - Check the card components to see what data they need. 636 | - Check the data.ts file to see what the function returns. 637 | 638 | Great! You've now fetched all the data for the dashboard overview page. Your page should look like this: 639 | 640 | ![Dashboard Data Fetching](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fcomplete-dashboard.png&w=1080&q=75&dpl=dpl_9qQQdh4D2Yn6grRGdiVN5fQKpqX7) 641 | 642 | 643 | However... there are two things you need to be aware of: 644 | 645 | 1. The data requests are unintentionally blocking each other, creating a request waterfall. 646 | 647 | 2. By default, Next.js prerenders routes to improve performance, this is called Static Rendering. So if your data changes, it won't be reflected in your dashboard. 648 | 649 | ## Request Waterfalls 650 | 651 | What are request waterfalls? 652 | 653 | A "waterfall" refers to a sequence of network requests that depend on the completion of previous requests. In the case of data fetching, each request can only begin once the previous request has returned data. 654 | 655 | For example, we need to wait for fetchRevenue() to execute before fetchLatestInvoices() can start running, and so on. 656 | 657 | This pattern is not necessarily bad. There may be cases where you want waterfalls because you want a condition to be satisfied before you make the next request. For example, you might want to fetch a user's ID and profile information first. Once you have the ID, you might then proceed to fetch their list of friends. In this case, each request is contingent on the data returned from the previous request. 658 | 659 | However, this behavior can also be unintentional and impact performance. 660 | 661 | ## Parallel data fetching 662 | 663 | A common way to avoid waterfalls is to initiate all data requests at the same time - in parallel. 664 | 665 | In JavaScript, you can use the Promise.all() or Promise.allSettled() functions to initiate all promises at the same time. For example, in data.ts, we're using Promise.all() in the fetchCardData() function. 666 | 667 | > Good to know: 668 | > 669 | > With Promise.allSettled(), you can also return an array of objects with status and value keys, so can check a promise's status is fulfilled or rejected before passing the value to your component. It's useful if you want to handle errors more gracefully. 670 | 671 | By using this pattern, you can: 672 | 673 | - Start executing all data fetches at the same time, which can lead to performance gains. 674 | - Use a native JavaScript pattern that can be applied to any library or framework. 675 | 676 | However, there is one disadvantage of using this JavaScript pattern: what happens if one data request is slower than all the others? 677 | 678 | --- 679 | 680 | ## Static and Dynamic Rendering 681 | 682 | Learn about how you can use to further optimize data fetching with PPR and Streaming. 683 | 684 | > ⚠️ This chapter contains Next.js 14 experimental features that are subject to change. The content may be updated as the features are finalized. 685 | 686 | In the previous chapter, you fetched data for the Dashboard Overview page. However, we briefly discussed two limitations of the current setup: 687 | 688 | 1. The data requests are creating an unintentional waterfall. 689 | 2. The dashboard is static, so any data updates will not be reflected on your application. 690 | 691 | In this chapter... 692 | 693 | Here are the topics we’ll cover 694 | 695 | - What static rendering is and how it can improve your application's performance. 696 | 697 | - What dynamic rendering is and when to use it. 698 | 699 | - Different approaches to make your dashboard dynamic. 700 | 701 | - The limitation of fetching data at request time. 702 | 703 | ### What is Static Rendering? 704 | 705 | With static rendering, data fetching and rendering happens on the server at build time (when you deploy) or during revalidation. The result can then be distributed and cached (stored) in a Content Delivery Network (CDN). 706 | 707 | ![CDN](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fstatic-site-generation.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 708 | 709 | Whenever a user visits your application, the cached result is served. There are a couple of benefits of static rendering: 710 | 711 | Faster Websites - Prerendered content can be cached. This ensures that users around the world can access your website's content more quickly and reliably. 712 | Reduced Server Load - Because the content is cached, your server does not have to dynamically generate content for each user request. 713 | SEO - Prerendered content is easier for search engine crawlers to index, as the content is already available when the page loads. This can lead to improved search engine rankings. 714 | Static rendering is useful for UI with no data or data that is shared across users, such as a static blog post or a product page. It might not be a good fit for a dashboard that has data that is regularly updated. 715 | 716 | The opposite of static rendering is dynamic rendering. 717 | 718 | ### What is Dynamic Rendering? 719 | 720 | With dynamic rendering, content is rendered on the server for each user at request time (when the user visits the page). There are a couple of benefits of dynamic rendering: 721 | 722 | - Real-Time Data - Dynamic rendering allows your application to display real-time or frequently updated data. This is ideal for applications where data changes often. 723 | 724 | - User-Specific Content - It's easier to serve user-specific content, such as personalized dashboards or user profiles, through dynamic rendering, as the data is updated based on user interaction. 725 | 726 | - Request Time Information - Dynamic rendering allows you to access information that can only be known at request time, such as cookies or the URL search parameters. 727 | 728 | ## Making the dashboard dynamic 729 | 730 | By default, @vercel/postgres doesn't set its own caching semantics. This allows the framework to set its own static and dynamic behavior. 731 | 732 | You can use a Next.js API called unstable_noStore inside your Server Components or data fetching functions to opt out of static rendering. Let's add this. 733 | 734 | In your data.ts, import unstable_noStore from next/cache, and call it the top of your data fetching functions: 735 | 736 | ```tsx 737 | // ... 738 | import { unstable_noStore as noStore } from 'next/cache'; 739 | 740 | export async function fetchRevenue() { 741 | // Add noStore() here to prevent the response from being cached. 742 | // This is equivalent to in fetch(..., {cache: 'no-store'}). 743 | noStore(); 744 | 745 | // ... 746 | } 747 | ``` 748 | 749 | > Note: unstable_noStore is an experimental API and may change in the future. If you prefer to use a stable API in your own projects, you can also use the Segment Config Option export const dynamic = "force-dynamic". 750 | 751 | ### Simulating a Slow Data Fetch 752 | 753 | Making the dashboard dynamic is a good first step. However... there is still one problem we mentioned in the previous chapter. What happens if one data request is slower than all the others? 754 | 755 | Let's simulate a slow data fetch to see what happens. In your data.ts file, uncomment the console.log and setTimeout inside fetchRevenue(): 756 | 757 | ```tsx 758 | export async function fetchRevenue() { 759 | try { 760 | // We artificially delay a response for demo purposes. 761 | // Don't do this in a real application 762 | console.log('Fetching revenue data...'); 763 | await new Promise((resolve) => setTimeout(resolve, 3000)); 764 | 765 | const data = await sql`SELECT * FROM revenue`; 766 | 767 | console.log('Data fetch complete after 3 seconds.'); 768 | 769 | return data.rows; 770 | } catch (error) { 771 | console.error('Database Error:', error); 772 | throw new Error('Failed to fetch revenue data.'); 773 | } 774 | } 775 | ``` 776 | 777 | Here, you've added an artificial 3-second delay to simulate a slow data fetch. The result is that now your whole page is blocked while the data is being fetched. 778 | 779 | ![data fetch blocking](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fsequential-parallel-data-fetching.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 780 | 781 | Which brings us to a common challenge developers have to solve: 782 | 783 | With dynamic rendering, your application is only as fast as your slowest data fetch. 784 | 785 | ## Streaming 786 | 787 | In the previous chapter, you made your dashboard page dynamic, however, we discussed how the slow data fetches can impact the performance of your application. Let's look at how you can improve the user experience when there are slow data requests. 788 | 789 | In this chapter... 790 | 791 | Here are the topics we’ll cover 792 | 793 | - What streaming is and when you might use it. 794 | 795 | - How to implement streaming with loading.tsx and Suspense. 796 | 797 | - What loading skeletons are. 798 | 799 | - What route groups are, and when you might use them. 800 | 801 | - Where to place Suspense boundaries in your application. 802 | 803 | ### What is streaming? 804 | 805 | Streaming is a data transfer technique that allows you to break down a route into smaller "chunks" and progressively stream them from the server to the client as they become ready. 806 | 807 | By streaming, you can prevent slow data requests from blocking your whole page. This allows the user to see and interact with parts of the page without waiting for all the data to load before any UI can be shown to the user. 808 | 809 | Data fetching and rendering are initiated in parallel, so the user can see the UI as it becomes ready. This is different from the traditional waterfall approach, where data fetching and rendering are initiated sequentially, blocking the UI from rendering until all the data is ready. 810 | 811 | ![Project example streaming](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fserver-rendering-with-streaming-chart.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 812 | 813 | Streaming works well with React's component model, as each component can be considered a chunk. 814 | 815 | There are two ways you implement streaming in Next.js: 816 | 817 | 1. At the page level, with the loading.tsx file. 818 | 2. For specific components, with \. 819 | 820 | Let's see how this works. 821 | 822 | A few things are happening here: 823 | 824 | 1. loading.tsx is a special Next.js file built on top of Suspense, it allows you to create loading UI to show as a replacement while page content loads. 825 | 2. Since is static, it's shown immediately. The user can interact with while the dynamic content is loading. 826 | 3. The user doesn't have to wait for the page to finish loading before navigating away (this is called interruptable navigation). 827 | 828 | Congratulations! You've just implemented Streaming with Next.js! 829 | 830 | But we can do more to improve the user experience. Let's show a skeleton instead of the Loading… text. 831 | 832 | ### Adding loading skeletons 833 | A loading skeleton is a simplified version of the UI. Many websites use them as a placeholder (or fallback) to indicate to users that the content is loading. Any UI you embed into loading.tsx will be embedded as part of the static file, and sent first. Then, the rest of the dynamic content will be streamed in from the server to the client. 834 | 835 | Inside your loading.tsx file, import a new component called \ 836 | 837 | ![Dashboard skeleton](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Floading-page-with-skeleton.png&w=1080&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 838 | 839 | ### Fixing the loading skeleton bug with route groups 840 | 841 | Right now, your loading skeleton will apply to the invoices and customers pages as well. 842 | 843 | Since loading.tsx is a level higher than /invoices/page.tsx and /customers/page.tsx in the file system, it's also applied to those pages. 844 | 845 | We can change this with Route Groups. Create a new folder called /(overview) inside the dashboard folder. Then, move your loading.tsx and page.tsx files inside the folder: 846 | 847 | ![Route groups /(overview)](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Froute-group.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 848 | 849 | Now, the loading.tsx file will only apply to your dashboard overview page. 850 | 851 | Route groups allow you to organize files into logical groups without affecting the URL path structure. When you create a new folder using parentheses (), the name won't be included in the URL path. So /dashboard/(overview)/page.tsx becomes /dashboard. 852 | 853 | Here, you're using a route group to ensure loading.tsx only applies to your dashboard overview page. However, you can also use route groups to separate your application into sections (e.g. (marketing) routes and (dashboard) routes) or by teams for larger applications. 854 | 855 | ## Streaming a component 856 | 857 | So far, you're streaming a whole page. But, instead, you can be more granular and stream specific components using React Suspense. 858 | 859 | Suspense allows you to defer rendering parts of your application until some condition is met (e.g. data is loaded). You can wrap your dynamic components in Suspense. Then, pass it a fallback component to show while the dynamic component loads. 860 | 861 | If you remember the slow data request, fetchRevenue(), this is the request that is slowing down the whole page. Instead of blocking your page, you can use Suspense to stream only this component and immediately show the rest of the page's UI. 862 | 863 | To do so, you'll need to move the data fetch to the component. 864 | 865 | Finally, update the \ component to fetch its own data and remove the prop passed to it. 866 | 867 | Now refresh the page, you should see the dashboard information almost immediately, while a fallback skeleton is shown for \ 868 | 869 | ![Dashboard skeleton Streaming](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Floading-revenue-chart.png&w=1080&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 870 | 871 | Practice: Streaming \ 872 | Now it's your turn! Practice what you've just learned by streaming the \ component. 873 | 874 | Move fetchLatestInvoices() down from the page to the \ component. Wrap the component in a \ boundary with a fallback called \. 875 | 876 | ## Grouping components 877 | 878 | Great! You're almost there, now you need to wrap the \ components in Suspense. You can fetch data for each individual card, but this could lead to a popping effect as the cards load in, this can be visually jarring for the user. 879 | 880 | > So, how would you tackle this problem? 881 | 882 | To create more of a staggered effect, you can group the cards using a wrapper component. This means the static \ will be shown first, followed by the cards, etc. 883 | 884 | In your page.tsx file: 885 | 886 | 1. Delete your \ components. 887 | 2. Delete the fetchCardData() function. 888 | 3. Import a new wrapper component called \. 889 | 4. Wrap \ in Suspense. 890 | 891 | ### Deciding where to place your Suspense boundaries 892 | 893 | Where you place your Suspense boundaries will depend on a few things: 894 | 895 | 1. How you want the user to experience the page as it streams. 896 | 2. What content you want to prioritize. 897 | 3. If the components rely on data fetching. 898 | 899 | Take a look at your dashboard page, is there anything you would've done differently? 900 | 901 | - You could stream the whole page like we did with loading.tsx... but that may lead to a longer loading time if one of the components has a slow data fetch. 902 | - You could stream every component individually... but that may lead to UI popping into the screen as it becomes ready. 903 | - You could also create a staggered effect by streaming page sections. But you'll need to create wrapper components. 904 | 905 | Where you place your suspense boundaries will vary depending on your application. In general, it's good practice to move your data fetches down to the components that need it, and then wrap those components in Suspense. But there is nothing wrong with streaming the sections or the whole page if that's what your application needs. 906 | 907 | Don't be afraid to experiment with Suspense and see what works best, it's a powerful API that can help you create more delightful user experiences. 908 | 909 | --- 910 | 911 | ## Partial Prerendering (Optional) 912 | 913 | Partial Prerendering is an experimental feature introduced in Next.js 14. The content of this page may be updated as the feature progresses in stability. You may want to skip this chapter if you prefer to not use experimental features. This chapter is not required to complete the course. 914 | 915 | In this chapter... 916 | 917 | Here are the topics we’ll cover 918 | 919 | - What Partial Prerendering is. 920 | 921 | - How Partial Prerendering works. 922 | 923 | ### Combining Static and Dynamic Content 924 | 925 | Currently, if you call a dynamic function inside your route (e.g. noStore(), cookies(), etc), your whole route becomes dynamic. 926 | 927 | This aligns with how most web apps are built today, you either choose between static and dynamic rendering for your entire application or for specific routes. 928 | 929 | However, most routes are not fully static or dynamic. You may have a route that has both static and dynamic content. For example, let's say you have a social media feed, the posts would be static, but the likes for the post would be dynamic. Or an ecommerce site, where the product details are static, but the user's cart is dynamic. 930 | 931 | Going back to your dashboard page, what components would you consider static vs. dynamic? 932 | 933 | ![Dashboard Combining Static and Dynamic Content](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fdashboard-static-dynamic-components.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 934 | 935 | ### What is Partial Prerendering? 936 | 937 | In Next.js 14, there is a preview of a new compiler optimization called Partial Prerendering. Partial Prerendering is an experimental feature that allows you to render a route with a static loading shell, while keeping some parts dynamic. In other words, you can isolate the dynamic parts of a route. 938 | 939 | ![Example partial prerendering](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fthinking-in-ppr.png&w=1920&q=75&dpl=dpl_7RpAeq75qgcdEqm8L4GS5sRJ7t3C) 940 | 941 | When a user visits a route: 942 | 943 | - A static route shell is served, this makes the initial load fast. 944 | - The shell leaves holes where dynamic content will load in async. 945 | - The async holes is loaded in parallel, reducing the overall load time of the page. 946 | 947 | This is different from how your application behaves today, where entire routes are either fully static or dynamic. 948 | 949 | ### How does Partial Prerendering work? 950 | 951 | Partial Prerendering leverages React's Concurrent APIs and uses Suspense to defer rendering parts of your application until some condition is met (e.g. data is loaded). 952 | 953 | The fallback is embedded into the initial static file along with other static content. At build time (or during revalidation), the static parts of the route are prerendered, and the rest is postponed until the user requests the route. 954 | 955 | The great thing about Partial Prerendering is that you don't need to change your code to use it. As long as you're using Suspense to wrap the dynamic parts of your route, Next.js will know which parts of your route are static and which are dynamic. 956 | 957 | ## Summary 958 | 959 | To recap, you've done a few things to optimize data fetching in your application, you've: 960 | 961 | 1. Created a database in the same region as your application code to reduce latency between your server and database. 962 | 2. Fetched data on the server with React Server Components. This allows you to keep expensive data fetches and logic on the server, reduces the client-side JavaScript bundle, and prevents your database secrets from being exposed to the client. 963 | 3. Used SQL to only fetch the data you needed, reducing the amount of data transferred for each request and the amount of JavaScript needed to transform the data in-memory. 964 | 4. Parallelize data fetching with JavaScript - where it made sense to do so. 965 | 5. Implemented Streaming to prevent slow data requests from blocking your whole page, and to allow the user to start interacting with the UI without waiting for everything to load. 966 | 6. Move data fetching down to the components that need it, thus isolating which parts of your routes should be dynamic in preparation for Partial Prerendering. 967 | 968 | --- 969 | 970 | ## Adding Search and Pagination 971 | 972 | In the previous chapter, you improved your dashboard's initial loading performance with streaming. Now let's move on to the /invoices page, and learn how to add search and pagination! 973 | 974 | In this chapter... 975 | 976 | Here are the topics we’ll cover 977 | 978 | - Learn how to use the Next.js APIs: searchParams, usePathname, and useRouter. 979 | 980 | - Implement search and pagination using URL search params. 981 | 982 | ### /dashboard/invoices/page.tsx 983 | 984 | Spend some time familiarizing yourself with the page and the components you'll be working with: 985 | 986 | \ allows users to search for specific invoices. 987 | \ allows users to navigate between pages of invoices. 988 | \ displays the invoices. 989 | 990 | Your search functionality will span the client and the server. When a user searches for an invoice on the client, the URL params will be updated, data will be fetched on the server, and the table will re-render on the server with the new data. 991 | 992 | ### Why use URL search params? 993 | 994 | As mentioned above, you'll be using URL search params to manage the search state. This pattern may be new if you're used to doing it with client side state. 995 | 996 | There are a couple of benefits of implementing search with URL params: 997 | 998 | - Bookmarkable and Shareable URLs: Since the search parameters are in the URL, users can bookmark the current state of the application, including their search queries and filters, for future reference or sharing. 999 | - Server-Side Rendering and Initial Load: URL parameters can be directly consumed on the server to render the initial state, making it easier to handle server rendering. 1000 | - Analytics and Tracking: Having search queries and filters directly in the URL makes it easier to track user behavior without requiring additional client-side logic. 1001 | 1002 | ### Adding the search functionality 1003 | 1004 | There are three Next.js client hooks that you'll use to implement the search functionality: 1005 | 1006 | - **useSearchParams** Allows you to access the parameters of the current URL. For example, the search params for this URL /dashboard/invoices?page=1&query=pending would look like this: {page: '1', query: 'pending'}. 1007 | 1008 | - **usePathname** - Lets you read the current URL's pathname. For example, the route /dashboard/invoices, usePathname would return '/dashboard/invoices'. 1009 | 1010 | - **useRouter** - Enables navigation between routes within client components programmatically. There are multiple methods you can use. 1011 | 1012 | Here's a quick overview of the implementation steps: 1013 | 1014 | 1. Capture the user's input. 1015 | 2. Update the URL with the search params. 1016 | 3. Keep the URL in sync with the input field. 1017 | 4. Update the table to reflect the search query. 1018 | 1019 | 1. Capture the user's input 1020 | 1021 | Go into the \ Component (/app/ui/search.tsx), and you'll notice: 1022 | 1023 | "use client" - This is a Client Component, which means you can use event listeners and hooks. 1024 | \ - This is the search input. 1025 | Create a new handleSearch function, and add an onChange listener to the \ element. 1026 | 1027 | onChange will invoke handleSearch whenever the input value changes. 1028 | 1029 | 2. Update the URL with the search params 1030 | 1031 | Import the useSearchParams hook from 'next/navigation', and assign it to a variable. 1032 | 1033 | Inside handleSearch, create a new URLSearchParams instance using your new searchParams variable. 1034 | 1035 | URLSearchParams is a Web API that provides utility methods for manipulating the URL query parameters. Instead of creating a complex string literal, you can use it to get the params string like ?page=1&query=a. 1036 | 1037 | Next, set the params string based on the user’s input. If the input is empty, you want to delete it. 1038 | 1039 | Now that you have the query string. You can use Next.js's useRouter and usePathname hooks to update the URL. 1040 | 1041 | Import useRouter and usePathname from 'next/navigation', and use the replace method from userRouter() inside handleSearch. 1042 | 1043 | Here's a breakdown of what's happening: 1044 | 1045 | `${pathname}` is the current path, in your case, `"/dashboard/invoices".` 1046 | As the user types into the search bar, `params.toString()` translates this input into a URL-friendly format. 1047 | The replace`(${pathname}?${params.toString()});` command updates the URL with the user's search data. For example, `/dashboard/invoices?query=lee` if the user searches for "lee". 1048 | The URL is updated without reloading the page, thanks to Next.js's client-side navigation 1049 | 1050 | ```tsx 1051 | 'use client'; 1052 | 1053 | import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; 1054 | import { useSearchParams, usePathname, useRouter } from 'next/navigation'; 1055 | 1056 | export default function Search({ placeholder }: { placeholder: string }) { 1057 | const searchParams = useSearchParams(); 1058 | const pathname = usePathname(); 1059 | const { replace } = useRouter(); 1060 | 1061 | const handleSearch = (e: React.ChangeEvent)=>{ 1062 | const params = new URLSearchParams(searchParams) 1063 | const term: string = e.target.value 1064 | if (term) { 1065 | params.set('query', term); 1066 | } else { 1067 | params.delete('query'); 1068 | } 1069 | replace(`${pathname}?${params.toString()}`); 1070 | } 1071 | //... 1072 | } 1073 | ``` 1074 | 1075 | 3. Keeping the URL and input in sync 1076 | 1077 | To ensure the input field is in sync with the URL and will be populated when sharing, you can pass a defaultValue to input by reading from searchParams. 1078 | 1079 | ```tsx 1080 | { 1084 | handleSearch(e.target.value); 1085 | }} 1086 | defaultValue={searchParams.get('query')?.toString()} 1087 | /> 1088 | ``` 1089 | 1090 | > defaultValue vs. value / Controlled vs. Uncontrolled 1091 | > 1092 | >If you're using state to manage the value of an input, you'd use the value attribute to make it a controlled component. This means React would manage the input's state. 1093 | > 1094 | >However, since you're not using state, you can use defaultValue. This means the native input will manage its own state. This is okay since you're saving the search query to the URL instead of state. 1095 | 1096 | 4. Updating the table 1097 | 1098 | Finally, you need to update the table component to reflect the search query. 1099 | 1100 | Navigate back to the invoices page. 1101 | 1102 | Page components accept a prop called searchParams, so you can pass the current URL params to the \ component. 1103 | 1104 | If you navigate to the \ Component, you'll see that the two props, query and currentPage, are passed to the fetchFilteredInvoices() function which returns the invoices that match the query. 1105 | 1106 | > ❓ When to use the useSearchParams() hook vs. the searchParams prop? 1107 | > 1108 | >You might have noticed you used two different ways to extract search params. Whether you use one or the other depends on whether you're working on the client or the server. 1109 | > 1110 | >\ is a Client Component, so you used the useSearchParams() hook to access the params from the client. 1111 | > 1112 | >\ is a Server Component that fetches its own data, so you can pass the searchParams prop from the page to the component. 1113 | > 1114 | >As a general rule, if you want to read the params from the client, use the useSearchParams() hook as this avoids having to go back to the server. 1115 | 1116 | 1117 | ### Best practice: Debouncing 1118 | 1119 | Congratulations! You've implemented search with Next.js! But there's something you can do to optimize it. 1120 | 1121 | You're updating the URL on every keystroke, and therefore querying your database on every keystroke! This isn't a problem as our application is small, but imagine if your application had thousands of users, each sending a new request to your database on each keystroke. 1122 | 1123 | Debouncing is a programming practice that limits the rate at which a function can fire. In our case, you only want to query the database when the user has stopped typing. 1124 | 1125 | How Debouncing Works: 1126 | 1127 | 1. Trigger Event: When an event that should be debounced (like a keystroke in the search box) occurs, a timer starts. 1128 | 2. Wait: If a new event occurs before the timer expires, the timer is reset. 1129 | 3. Execution: If the timer reaches the end of its countdown, the debounced function is executed. 1130 | 1131 | You can implement debouncing in a few ways, including manually creating your own debounce function. To keep things simple, we'll use a library called use-debounce. 1132 | 1133 | ```bash 1134 | npm i use-debounce 1135 | ``` 1136 | 1137 | In your \ Component, import a function called useDebouncedCallback 1138 | This function will wrap the contents of handleSearch, and only run the code after a specific time once the user has stopped typing (300ms). 1139 | 1140 | By debouncing, you can reduce the number of requests sent to your database, thus saving resources. 🖥️ 1141 | 1142 | ## Adding pagination 1143 | 1144 | After introducing the search feature, you'll notice the table displays only 6 invoices at a time. This is because the fetchFilteredInvoices() function in data.ts returns a maximum of 6 invoices per page. 1145 | 1146 | Adding pagination allows users to navigate through the different pages to view all the invoices. Let's see how you can implement pagination using URL params, just like you did with search. 1147 | 1148 | Navigate to the \ component and you'll notice that it's a Client Component. You don't want to fetch data on the client as this would expose your database secrets (remember, you're not using an API layer). Instead, you can fetch the data on the server, and pass it to the component as a prop. 1149 | 1150 | In /dashboard/invoices/page.tsx, import a new function called fetchInvoicesPages and pass the query from searchParams as an argument. 1151 | 1152 | fetchInvoicesPages returns the total number of pages based on the search query. For example, if there are 12 invoices that match the search query, and each page displays 6 invoices, then the total number of pages would be 2. 1153 | 1154 | Next, pass the totalPages prop to the \ component. 1155 | Import the usePathname and useSearchParams hooks. We will use this to get the current page and set the new page. 1156 | 1157 | Here's a breakdown of what's happening: 1158 | 1159 | - createPageURL creates an instance of the current search parameters. 1160 | - Then, it updates the "page" parameter to the provided page number. 1161 | - Finally, it constructs the full URL using the pathname and updated search parameters. 1162 | 1163 | Finally, when the user types a new search query, you want to reset the page number to 1. You can do this by updating the handleSearch function in your \ component. 1164 | 1165 | ### Summary 1166 | 1167 | Congratulations! You've just implemented search and pagination using URL Params and Next.js APIs. 1168 | 1169 | To summarize, in this chapter: 1170 | 1171 | - You've handled search and pagination with URL search parameters instead of client state. 1172 | - You've fetched data on the server. 1173 | - You're using the useRouter router hook for smoother, client-side transitions. 1174 | 1175 | These patterns are different from what you may be used to when working with client-side React, but hopefully, you now better understand the benefits of using URL search params and lifting this state to the server. 1176 | 1177 | --- 1178 | 1179 | ## Mutating Data 1180 | 1181 | Learn how to mutate data with Server Actions. 1182 | 1183 | In the previous chapter, you implemented search and pagination using URL Search Params and Next.js APIs. Let's continue working on the Invoices page by adding the ability to create, update, and delete invoices! 1184 | 1185 | In this chapter... 1186 | 1187 | Here are the topics we’ll cover 1188 | 1189 | - What React Server Actions are and how to use them to mutate data. 1190 | 1191 | - How to work with forms and Server Components. 1192 | 1193 | - Best practices for working with the native formData object, including type validation. 1194 | 1195 | - How to revalidate the client cache using the revalidatePath API. 1196 | 1197 | - How to create dynamic route segments with specific IDs. 1198 | 1199 | - How to use the React’s useFormStatus hook for optimistic updates. 1200 | 1201 | ### What are Server Actions? 1202 | 1203 | React Server Actions allow you to run asynchronous code directly on the server. They eliminate the need to create API endpoints to mutate your data. Instead, you write asynchronous functions that execute on the server and can be invoked from your Client or Server Components. 1204 | 1205 | Security is a top priority for web applications, as they can be vulnerable to various threats. This is where Server Actions come in. They offer an effective security solution, protecting against different types of attacks, securing your data, and ensuring authorized access. Server Actions achieve this through techniques like POST requests, encrypted closures, strict input checks, error message hashing, and host restrictions, all working together to significantly enhance your app's safety. 1206 | 1207 | ### Using forms with Server Actions 1208 | 1209 | In React, you can use the action attribute in the \ element to invoke actions. The action will automatically receive the native formData object, containing the captured data. 1210 | 1211 | For example: 1212 | 1213 | ```tsx 1214 | // Server Component 1215 | export default function Page() { 1216 | // Action 1217 | async function create(formData: FormData) { 1218 | 'use server'; 1219 | 1220 | // Logic to mutate data... 1221 | } 1222 | 1223 | // Invoke the action using the "action" attribute 1224 | return
...; 1225 | } 1226 | ``` 1227 | 1228 | An advantage of invoking a Server Action within a Server Component is progressive enhancement - forms work even if JavaScript is disabled on the client. 1229 | 1230 | ### Next.js with Server Actions 1231 | 1232 | Server Actions are also deeply integrated with Next.js caching. When a form is submitted through a Server Action, not only can you use the action to mutate data, but you can also revalidate the associated cache using APIs like **revalidatePath** and **revalidateTag.** 1233 | 1234 | Let's see how it all works together! 1235 | 1236 | Creating an invoice 1237 | Here are the steps you'll take to create a new invoice: 1238 | 1239 | 1. Create a form to capture the user's input. 1240 | 2. Create a Server Action and invoke it from the form. 1241 | 3. Inside your Server Action, extract the data from the formData object. 1242 | 4. Validate and prepare the data to be inserted into your database. 1243 | 5. Insert the data and handle any errors. 1244 | 6. Revalidate the cache and redirect the user back to invoices page. 1245 | 1246 | 1. Create a new route and form 1247 | 1248 | To start, inside the /invoices folder, add a new route segment called /create with a page.tsx file: 1249 | 1250 | ```bash 1251 | └── invoices 1252 | └── create 1253 | └── page.tsx 1254 | ``` 1255 | 1256 | Your page is a Server Component that fetches customers and passes it to the \ component. 1257 | 1258 | Navigate to the \ component, and you'll see that the form: 1259 | 1260 | - Has two \ (dropdown) elements: customers and status. 1261 | - Has one \ element for the amount with type="number". 1262 | - Has one button with type="submit". 1263 | 1264 | ![Form Invoices create](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fcreate-invoice-page.png&w=1080&q=75&dpl=dpl_FQk1vqJFzbvQf7ciyg5D7QiENdN4) 1265 | 1266 | 2. Create a Server Action 1267 | 1268 | Great, now let's create a Server Action that is going to be called when the form is submitted. 1269 | 1270 | Navigate to your lib directory and create a new file named actions.ts. At the top of this file, add the React use server directive. 1271 | 1272 | By adding the 'use server', you mark all the exported functions within the file as server functions. These server functions can then be imported into Client and Server components, making them extremely versatile. 1273 | 1274 | You can also write Server Actions directly inside Server Components by adding "use server" inside the action. But for this course, we'll keep them all organized in a separate file. 1275 | 1276 | In your actions.ts file, create a new async function that accepts formData: 1277 | 1278 | ```ts 1279 | 'use server'; 1280 | 1281 | export async function createInvoice(formData: FormData) {} 1282 | ``` 1283 | 1284 | Then, in your \ component, import the createInvoice from your actions.ts file. Add a action attribute to the \ element, and call the createInvoice action. 1285 | 1286 | >Good to know: In HTML, you'd pass a URL to the action attribute. This URL would be the destination where your form data should be submitted (usually an API endpoint). 1287 | > 1288 | >However, in React, the action attribute is considered a special prop - meaning React builds on top of it to allow actions to be invoked. Rather than calling an API explicitly, you can pass a function to action. 1289 | > 1290 | >Behind the scenes, Server Actions create a POST API endpoint. This is why you don't need to create API endpoints manually when using Server Actions. 1291 | 1292 | 3. Extract the data from formData 1293 | 1294 | Back in your actions.ts file, you'll need to extract the values of formData, there are a couple of methods you can use. For this example, let's use the .get(name) method. 1295 | 1296 | ```ts 1297 | 'use server'; 1298 | 1299 | export async function createInvoice(formData: FormData) { 1300 | const rawFormData = { 1301 | customerId: formData.get('customerId'), 1302 | amount: formData.get('amount'), 1303 | status: formData.get('status'), 1304 | }; 1305 | // Test it out: 1306 | console.log(rawFormData); 1307 | } 1308 | ``` 1309 | 1310 | >Tip: If you're working with forms that have many fields, you may want to consider using the entries() method with JavaScript's Object.fromEntries(). For example: 1311 | > 1312 | >const rawFormData = Object.fromEntries(formData.entries()) 1313 | 1314 | To check everything is connected correctly, go ahead and try out the form. After submitting, you should see the data you just entered into the form logged in your terminal. 1315 | 1316 | Now that your data is in the shape of an object, it'll be much easier to work with. 1317 | 1318 | ```bash 1319 | { 1320 | customerId: 'cc27c14a-0acf-4f4a-a6c9-d45682c144b9', 1321 | amount: '1000', 1322 | status: 'paid' 1323 | } 1324 | ``` 1325 | 1326 | 4. Validate and prepare the data 1327 | 1328 | Before sending the form data to your database, you want to ensure it's in the correct format and with the correct types. If you remember from earlier in the course, your invoices table expects data in the following format: 1329 | 1330 | ```ts 1331 | export type Invoice = { 1332 | id: string; // Will be created on the database 1333 | customer_id: string; 1334 | amount: number; // Stored in cents 1335 | status: 'pending' | 'paid'; 1336 | date: string; 1337 | }; 1338 | ``` 1339 | 1340 | So far, you only have the customer_id, amount, and status from the form. 1341 | 1342 | ### Type validation and coercion 1343 | 1344 | It's important to validate that the data from your form aligns with the expected types in your database. For instance, if you add a console.log inside your action... 1345 | 1346 | You'll notice that amount is of type string and not number. This is because input elements with type="number" actually return a string, not a number! 1347 | 1348 | To handle type validation, you have a few options. While you can manually validate types, using a type validation library can save you time and effort. For your example, we'll use **Zod**, a TypeScript-first validation library that can simplify this task for you. 1349 | 1350 | In your actions.ts file, import Zod and define a schema that matches the shape of your form object. This schema will validate the formData before saving it to a database. 1351 | 1352 | ```ts 1353 | import { z } from 'zod'; 1354 | 1355 | const InvoiceSchema = z.object({ 1356 | id: z.string(), 1357 | customerId: z.string(), 1358 | amount: z.coerce.number(), 1359 | status: z.enum(['pending', 'paid']), 1360 | date: z.string(), 1361 | }); 1362 | 1363 | const CreateInvoice = InvoiceSchema.omit({ id: true, date: true }); 1364 | ``` 1365 | 1366 | The amount field is specifically set to coerce (change) from a string to a number while also validating its type. 1367 | 1368 | You can then pass your rawFormData to NewInvoice to validate the types: 1369 | 1370 | **Storing values in cents** 1371 | 1372 | It's usually good practice to store monetary values in cents in your database to eliminate JavaScript floating-point errors and ensure greater accuracy. 1373 | 1374 | Let's convert the amount into cents: 1375 | 1376 | `const amountInCents = amount * 100;` 1377 | 1378 | **Creating new dates** 1379 | 1380 | Finally, let's create a new date with the format "YYYY-MM-DD" for the invoice's creation date: 1381 | 1382 | `const date = new Date().toISOString().split('T')[0];` 1383 | 1384 | 5. Inserting the data into your database 1385 | 1386 | Now that you have all the values you need for your database, you can create an SQL query to insert the new invoice into your database and pass in the variables: 1387 | 1388 | ```ts 1389 | import { sql } from '@vercel/postgres'; 1390 | // ... 1391 | await sql` 1392 | INSERT INTO invoices (customer_id, amount, status, date) 1393 | VALUES (${customerId}, ${amountInCents}, ${status}, ${date}) 1394 | `; 1395 | ``` 1396 | 1397 | Right now, we're not handling any errors. We'll do it in the next chapter. For now, let's move on to the next step. 1398 | 1399 | 6. Revalidate and redirect 1400 | 1401 | Next.js has a **Client-side Router Cache** that stores the route segments in the user's browser for a time. Along with prefetching, this cache ensures that users can quickly navigate between routes while reducing the number of requests made to the server. 1402 | 1403 | Since you're updating the data displayed in the invoices route, you want to clear this cache and trigger a new request to the server. You can do this with the **revalidatePath** function from Next.js: 1404 | 1405 | ```ts 1406 | import { revalidatePath } from 'next/cache'; 1407 | //... 1408 | revalidatePath('/dashboard/invoices'); 1409 | ``` 1410 | 1411 | Once the database has been updated, the /dashboard/invoices path will be revalidated, and fresh data will be fetched from the server. 1412 | 1413 | At this point, you also want to redirect the user back to the /dashboard/invoices page. You can do this with the redirect function from Next.js: 1414 | 1415 | ```ts 1416 | import { redirect } from 'next/navigation'; 1417 | // ... 1418 | redirect('/dashboard/invoices'); 1419 | ``` 1420 | 1421 | Congratulations! You've just implemented your first Server Action. Test it out by adding a new invoice, if everything is working correctly: 1422 | 1423 | 1. You should be redirected to the /dashboard/invoices route on submission. 1424 | 2. You should see the new invoice at the top of the table. 1425 | 1426 | ### Updating an invoice 1427 | 1428 | The updating invoice form is similar to the create an invoice form, except you'll need to pass the invoice id to update the record in your database. Let's see how you can get and pass the invoice id. 1429 | 1430 | These are the steps you'll take to update an invoice: 1431 | 1432 | 1. Create a new dynamic route segment with the invoice id. 1433 | 2. Read the invoice id from the page params. 1434 | 3. Fetch the specific invoice from your database. 1435 | 4. Pre-populate the form with the invoice data. 1436 | 5. Update the invoice data in your database. 1437 | > 1438 | 1. Create a Dynamic Route Segment with the invoice id 1439 | Next.js allows you to create Dynamic Route Segments when you don't know the exact segment name and want to create routes based on data. This could be blog post titles, product pages, etc. You can create dynamic route segments by wrapping a folder's name in square brackets. For example, [id], [post] or [slug]. 1440 | 1441 | In your /invoices folder, create a new dynamic route called [id], then a new route called edit with a page.tsx file. 1442 | 1443 | In your \ component, notice there's a \ button that receives the invoice's id from the table records. 1444 | 1445 | Navigate to your \ component, and update the href of the Link to accept the id prop. You can use template literals to link to a dynamic route segment. 1446 | 1447 | 2. Read the invoice id from page params 1448 | 1449 | Notice how it's similar to your /create invoice page, except it imports a different form (from the edit-form.tsx file). This form should be pre-populated with a defaultValue for the customer's name, invoice amount, and status. To pre-populate the form fields, you need to fetch the specific invoice using id. 1450 | 1451 | In addition to searchParams, page components also accept a prop called params which you can use to access the id. Update your \ component to receive the prop. 1452 | 1453 | 3. Fetch the specific invoice 1454 | Then: 1455 | 1456 | - Import a new function called fetchInvoiceById and pass the id as an argument 1457 | - Import fetchCustomers to fetch the customer names for the dropdown. 1458 | 1459 | You can use Promise.all to fetch both the invoice and customers in parallel. 1460 | 1461 | After navigation, you should see a form that is pre-populated with the invoice details: 1462 | 1463 | ![Update Invoice](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fedit-invoice-page.png&w=1080&q=75&dpl=dpl_FQk1vqJFzbvQf7ciyg5D7QiENdN4) 1464 | 1465 | The URL should also be updated with an id as follows: http://localhost:3000/dashboard/invoice/uuid/edit 1466 | 1467 | >**UUIDs vs. Auto-incrementing Keys** 1468 | > 1469 | >We use UUIDs instead of incrementing keys (e.g., 1, 2, 3, etc.). This makes the URL longer; however, UUIDs eliminate the risk of ID collision, are globally unique, and reduce the risk of enumeration attacks - making them ideal for large databases. 1470 | > 1471 | >However, if you prefer cleaner URLs, you might prefer to use auto-incrementing keys. 1472 | 1473 | 4. Pass the id to the Server Action 1474 | 1475 | Lastly, you want to pass the id to the Server Action so you can update the right record in your database. 1476 | You can pass id to the Server Action using JS bind. This will ensure that any values passed to the Server Action are encoded. 1477 | 1478 | > **Note:** Using a hidden input field in your form also works (e.g. \). However, the values will appear as full text in the HTML source, which is not ideal for sensitive data like IDs. 1479 | 1480 | 5. Update the invoice data in your database. 1481 | 1482 | Then, in your actions.ts file, create a new action, updateInvoice 1483 | 1484 | ```ts 1485 | // Use Zod to update the expected types 1486 | const UpdateInvoice = InvoiceSchema.omit({ date: true }); 1487 | 1488 | // ... 1489 | 1490 | export async function updateInvoice(id: string, formData: FormData) { 1491 | const { customerId, amount, status } = UpdateInvoice.parse({ 1492 | customerId: formData.get('customerId'), 1493 | amount: formData.get('amount'), 1494 | status: formData.get('status'), 1495 | }); 1496 | 1497 | const amountInCents = amount * 100; 1498 | 1499 | await sql` 1500 | UPDATE invoices 1501 | SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} 1502 | WHERE id = ${id} 1503 | `; 1504 | 1505 | revalidatePath('/dashboard/invoices'); 1506 | redirect('/dashboard/invoices'); 1507 | } 1508 | ``` 1509 | 1510 | Similarly to the createInvoice action, here you are: 1511 | 1512 | 1. Extracting the data from formData. 1513 | 2. Validating the types with Zod. 1514 | 3. Converting the amount to cents. 1515 | 3. Passing the variables to your SQL query. 1516 | 4. Calling revalidatePath to clear the client cache and make a new server request. 1517 | 5. Calling redirect to redirect the user to the invoice's page. 1518 | 1519 | ## Deleting an invoice 1520 | 1521 | To delete an invoice using a Server Action, wrap the delete button in a
element and pass the id to the Server Action using bind: 1522 | 1523 | 1524 | ```ts 1525 | import { deleteInvoice } from '@/app/lib/actions'; 1526 | // ... 1527 | const deleteInvoiceWithId = deleteInvoice.bind(null, id); 1528 | ``` 1529 | 1530 | Inside your actions.ts file, create a new action called deleteInvoice. 1531 | 1532 | ```ts 1533 | export async function deleteInvoice(id: string) { 1534 | await sql`DELETE FROM invoices WHERE id = ${id}`; 1535 | revalidatePath('/dashboard/invoices'); 1536 | } 1537 | ``` 1538 | 1539 | Since this action is being called in the /dashboard/invoices path, you don't need to call redirect. Calling revalidatePath will trigger a new server request and re-render the table. 1540 | 1541 | **Further reading** 1542 | In this chapter, you learned how to use Server Actions to mutate data. You also learned how to use the revalidatePath API to revalidate the Next.js cache and redirect to redirect the user to a new page. 1543 | 1544 | You can also read more about security with Server Actions. 1545 | 1546 | --- 1547 | 1548 | ## Handling Errors 1549 | 1550 | Let's explore best practices for mutating data with forms, including error handling and accessibility. 1551 | 1552 | In the previous chapter, you learned how to mutate data using Server Actions. Let's see how you can handle errors gracefully using JavaScript's try/catch statements and Next.js APIs. 1553 | 1554 | In this chapter... 1555 | 1556 | Here are the topics we’ll cover 1557 | 1558 | - How to use the special error.tsx file to catch errors in your route segments, and show a fallback UI to the user. 1559 | 1560 | - How to use the notFound function and not-found file to handle 404 errors (for resources that don’t exist). 1561 | 1562 | 1563 | ### Adding try/catch to Server Actions 1564 | 1565 | First, let's add JavaScript's try/catch statements to your Server Actions to allow you to handle errors gracefully. 1566 | 1567 | Note how redirect is being called outside of the try/catch block. This is because redirect works by throwing an error, which would be caught by the catch block. To avoid this, you can call redirect after try/catch. redirect would only be reachable if try is successful. 1568 | 1569 | ```ts 1570 | export async function deleteInvoice(id: string) { 1571 | try { 1572 | await sql`DELETE FROM invoices WHERE id = ${id}`; 1573 | revalidatePath('/dashboard/invoices'); 1574 | return { message: 'Deleted Invoice.' }; 1575 | } catch (error) { 1576 | return { message: 'Database Error: Failed to Delete Invoice.' }; 1577 | } 1578 | } 1579 | ``` 1580 | 1581 | Now, let's check what happens when an error is thrown in your Server Action. You can do this by throwing an error earlier. For example, in the deleteInvoice action, throw an error at the top of the function: 1582 | 1583 | ```ts 1584 | export async function deleteInvoice(id: string, formData: FormData) { 1585 | throw new Error('Failed to Delete Invoice'); 1586 | //... 1587 | ``` 1588 | 1589 | When you try to delete an invoice, you should see an error on localhost. 1590 | 1591 | Seeing these errors are helpful while developing as you can catch any potential problems early. However, you also want to show errors to the user to avoid an abrupt failure and allow your application to continue running. 1592 | 1593 | This is where Next.js error.tsx file comes in. 1594 | 1595 | ### Handling all errors with error.tsx 1596 | 1597 | The error.tsx file can be used to define a UI boundary for a route segment. It serves as a catch-all for unexpected errors and allows you to display a fallback UI to your users. 1598 | 1599 | Inside your /dashboard/invoices folder, create a new file called error.tsx 1600 | 1601 | There are a few things you'll notice about the code above: 1602 | 1603 | - "use client" - error.tsx needs to be a Client Component. 1604 | - It accepts two props: 1605 | - error: This object is an instance of JavaScript's native Error object. 1606 | - reset: This is a function to reset the error boundary. When executed, the function will try to re-render the route segment. 1607 | 1608 | When you try to delete an invoice again, you should see the following UI: 1609 | 1610 | ![Error handling delete invoice](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Ferror-page.png&w=1080&q=75&dpl=dpl_Dr17aKMkaNBEHortDHFuuK6oJKA5) 1611 | 1612 | 1613 | ### Handling 404 errors with the notFound function 1614 | 1615 | Another way you can handle errors gracefully is by using the notFound function. While error.tsx is useful for catching all errors, notFound can be used when you try to fetch a resource that doesn't exist. 1616 | 1617 | For example, visit http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit. 1618 | 1619 | This is a fake UUID that doesn't exist in your database. 1620 | 1621 | You'll immediately see error.tsx kicks in because this is a child route of /invoices where error.tsx is defined. 1622 | 1623 | However, if you want to be more specific, you can show a 404 error to tell the user the resource they're trying to access hasn't been found. 1624 | 1625 | Now that you know the invoice doesn't exist in your database, let's use notFound to handle it. Navigate to /dashboard/invoices/[id]/edit/page.tsx, and import { notFound } from 'next/navigation'. 1626 | 1627 | ```ts 1628 | import { notFound } from 'next/navigation'; 1629 | //... 1630 | if (!invoice) { 1631 | notFound(); 1632 | } 1633 | ``` 1634 | 1635 | Perfect! \ will now throw an error if a specific invoice is not found. To show an error UI to the user. Create a not-found.tsx file inside the /edit folder. 1636 | 1637 | Refresh the route, and you should now see the following UI: 1638 | 1639 | ![Not Found page](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2F404-not-found-page.png&w=1080&q=75&dpl=dpl_Dr17aKMkaNBEHortDHFuuK6oJKA5) 1640 | 1641 | 1642 | That's something to keep in mind, notFound will take precedence over error.tsx, so you can reach out for it when you want to handle more specific errors! 1643 | 1644 | Further reading 1645 | To learn more about error handling in Next.js, check out the following documentation: 1646 | 1647 | - [Error Handling](https://nextjs.org/docs/app/building-your-application/routing/error-handling) 1648 | - [error.js API Reference](https://nextjs.org/docs/app/api-reference/file-conventions/error) 1649 | - [notFound() API Reference](https://nextjs.org/docs/app/api-reference/functions/not-found) 1650 | - [not-found.js API Reference](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) 1651 | 1652 | --- 1653 | 1654 | ## Improving Accessibility 1655 | 1656 | Let's continue exploring ways to improve your user's experience. You'll learn about server-side form validation and improving accessibility. 1657 | 1658 | In the previous chapter, we looked at how to catch errors (including 404 errors) and display a fallback to the user. However, we still need to discuss another piece of the puzzle: form validation. Let's see how to implement server-side validation with Server Actions, and how you can show form errors using **useFormState** hook - while keeping accessibility in mind! 1659 | 1660 | In this chapter... 1661 | 1662 | Here are the topics we’ll cover 1663 | 1664 | - How to use eslint-plugin-jsx-a11y with Next.js to implement accessibility best practices. 1665 | 1666 | - How to implement server-side form validation. 1667 | 1668 | - How to use the React useFormState hook to handle form errors, and display them to the user. 1669 | 1670 | ### What is accessibility? 1671 | 1672 | Accessibility refers to designing and implementing web applications that everyone can use, including those with disabilities. It's a vast topic that covers many areas, such as keyboard navigation, semantic HTML, images, colors, videos, etc. 1673 | 1674 | While we won't go in-depth into accessibility in this course, we'll discuss the accessibility features available in Next.js and some common practices to make your applications more accessible. 1675 | 1676 | ### Using the ESLint accessibility plugin in Next.js 1677 | 1678 | By default, Next.js includes the eslint-plugin-jsx-a11y plugin to help catch accessibility issues early. For example, this plugin warns if you have images without alt text, use the aria-* and role attributes incorrectly, and more. 1679 | 1680 | Let's see how this works! 1681 | 1682 | Add next lint as a script in your package.json file: 1683 | 1684 | ```json 1685 | "scripts": { 1686 | "build": "next build", 1687 | "dev": "next dev", 1688 | "seed": "node -r dotenv/config ./scripts/seed.js", 1689 | "start": "next start", 1690 | "lint": "next lint" 1691 | } 1692 | ``` 1693 | 1694 | Then run npm run lint in your terminal, and you should get the next message: 1695 | 1696 | ```bash 1697 | npm run lint 1698 | 1699 | > lint 1700 | > next lint 1701 | 1702 | ✔ No ESLint warnings or errors 1703 | 1704 | ``` 1705 | 1706 | There are a couple of rules when using aria attributes, and if you're new to accessibility, it can be tricky to know if you're using them correctly. You can use this plugin to help you along the way. 1707 | 1708 | ### Improving form accessibility 1709 | 1710 | There are three things we're already doing to improve accessibility in our forms: 1711 | 1712 | - Semantic HTML: Using semantic elements (\, \, etc) instead of \. This allows assistive technologies (AT) to focus on the input elements and provide appropriate contextual information to the user, making the form easier to navigate and understand. 1713 | 1714 | - Labelling: Including \ and the htmlFor attribute ensures that each form field has a descriptive text label. This improves AT support by providing context and also enhances usability by allowing users to click on the label to focus on the corresponding input field. 1715 | 1716 | - Focus Outline: The fields are properly styled to show an outline when they are in focus. This is critical for accessibility as it visually indicates the active element on the page, helping both keyboard and screen reader users to understand where they are on the form. You can verify this by pressing tab. 1717 | 1718 | These practices lay a good foundation for making your forms more accessible to many users. However, they don't address form validation and errors. 1719 | 1720 | ## Form validation 1721 | 1722 | Go to http://localhost:3000/dashboard/invoices/create, and submit an empty form. What happens? 1723 | 1724 | You get an error! This is because you're sending empty form values to your Server Action. You can prevent this by validating your form on the client or the server. 1725 | 1726 | ### Client-Side validation 1727 | 1728 | There are a couple of ways you can validate forms on the client. The simplest would be to rely on the form validation provided by the browser by adding the required attribute to the \ and \ elements in your forms. 1729 | 1730 | ```tsx 1731 | 1739 | ``` 1740 | 1741 | Submit the form again, and you should now see the browser a warning if you try to submit a form with empty values. 1742 | 1743 | This approach is generally okay because some ATs support browser validation. 1744 | 1745 | An alternative to client-side validation is server-side validation. Let's see how you can implement it in the next section. For now, delete the required attributes if you added them. 1746 | 1747 | ### Server-Side validation 1748 | 1749 | By validating forms on the server, you can: 1750 | 1751 | - Ensure your data is in the expected format before sending it to your database. 1752 | - Reduce the risk of malicious users bypassing client-side validation. 1753 | - Have one source of truth for what is considered valid data. 1754 | 1755 | In your create-form.tsx component, import the useFormState hook from react-dom. Since useFormState is a hook, you will need to turn your form into a Client Component using "use client" directive: 1756 | 1757 | ```tsx 1758 | 'use client'; 1759 | 1760 | // ... 1761 | import { useFormState } from 'react-dom'; 1762 | ``` 1763 | 1764 | Inside your Form Component, the useFormState hook: 1765 | 1766 | Takes two arguments: (action, initialState). 1767 | Returns two values: [state, dispatch] - the form state, and a dispatch function (similar to useReducer) 1768 | Pass your createInvoice action as an argument of useFormState, and inside your \ attribute, call dispatch. 1769 | 1770 | ```tsx 1771 | // ... 1772 | import { useFormState } from 'react-dom'; 1773 | 1774 | export default function Form({ customers }: { customers: CustomerField[] }) { 1775 | const [state, dispatch] = useFormState(createInvoice, initialState); 1776 | 1777 | return ...; 1778 | } 1779 | ``` 1780 | 1781 | The initialState can be anything you define, in this case, create an object with two empty keys: message and errors. 1782 | 1783 | This may seem confusing initially, but it'll make more sense once you update the server action. Let's do that now. 1784 | 1785 | In your action.ts file, you can use Zod to validate form data. Update your InvoiceSchema as follows: 1786 | 1787 | ```ts 1788 | const InvoiceSchema = z.object({ 1789 | id: z.string(), 1790 | customerId: z.string({ 1791 | invalid_type_error: 'Please select a customer.', 1792 | }), 1793 | amount: z.coerce 1794 | .number() 1795 | .gt(0, { message: 'Please enter an amount greater than $0.' }), 1796 | status: z.enum(['pending', 'paid'], { 1797 | invalid_type_error: 'Please select an invoice status.', 1798 | }), 1799 | date: z.string(), 1800 | }); 1801 | ``` 1802 | 1803 | - `customerId` - Zod already throws an error if the customer field is empty as it expects a type string. But let's add a friendly message if the user doesn't select a customer. 1804 | - `amount` - Since you are coercing the amount type from string to number, it'll default to zero if the string is empty. Let's tell Zod we always want the amount greater than 0 with the .gt() function. 1805 | - `status` - Zod already throws an error if the status field is empty as it expects "pending" or "paid". Let's also add a friendly message if the user doesn't select a status. 1806 | 1807 | Next, update your createInvoice action to accept two parameters: 1808 | 1809 | - `formData ` - same as before. 1810 | - `prevState` - contains the state passed from the useFormState hook. You won't be using it in the action in this example, but it's a required prop. 1811 | 1812 | Then, change the Zod parse() function to safeParse() 1813 | 1814 | ```ts 1815 | export async function createInvoice(prevState: State, formData: FormData) { 1816 | // Validate form fields using Zod 1817 | const validatedFields = CreateInvoice.safeParse({ 1818 | customerId: formData.get('customerId'), 1819 | amount: formData.get('amount'), 1820 | status: formData.get('status'), 1821 | }); 1822 | 1823 | // ... 1824 | } 1825 | ``` 1826 | 1827 | safeParse() will return an object containing either a success or error field. This will help handle validation more gracefully without having put this logic inside the try/catch block. 1828 | 1829 | Before sending the information to your database, check if the form fields were validated correctly with a conditional 1830 | 1831 | ```ts 1832 | // If form validation fails, return errors early. Otherwise, continue. 1833 | if (!validatedFields.success) { 1834 | return { 1835 | errors: validatedFields.error.flatten().fieldErrors, 1836 | message: 'Missing Fields. Failed to Create Invoice.', 1837 | }; 1838 | } 1839 | ``` 1840 | 1841 | If validatedFields isn't successful, we return the function early with the error messages from Zod. 1842 | 1843 | Great, now let's display the errors in your form component. Back in the create-form.tsx component, you can access the errors using the form state. 1844 | 1845 | 1846 | In the code above, you're also adding the following aria labels: 1847 | 1848 | - **aria-describedby="customer-error":** This establishes a relationship between the select element and the error message container. It indicates that the container with id="customer-error" describes the select element. Screen readers will read this description when the user interacts with the select box to notify them of errors. 1849 | 1850 | - **id="customer-error":** This id attribute uniquely identifies the HTML element that holds the error message for the select input. This is necessary for aria-describedby to establish the relationship. 1851 | 1852 | - **aria-live="polite":** The screen reader should politely notify the user when the error is updated. When the content changes (e.g. when a user corrects an error), the screen reader will announce these changes, but only when the user is idle so as not to interrupt them. 1853 | 1854 | Using the example above, add errors to your remaining form fields. You should also show a message at the bottom of the form if any fields are missing. Your UI should look like this: 1855 | 1856 | ![Create invoice form showing error messages for each field.](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Fform-validation-page.png&w=1080&q=75&dpl=dpl_AGrSzwth6hUFvw45h9RdJK62uM3B) 1857 | 1858 | Once you're ready, run `npm run lint` to check if you're using the aria labels correctly. 1859 | 1860 | If you'd like to challenge yourself, take the knowledge you've learned in this chapter and add form validation to the edit-form.tsx component. 1861 | 1862 | You'll need to: 1863 | 1864 | - Add useFormState to your edit-form.tsx component. 1865 | - Edit the updateInvoice action to handle validation errors from Zod. 1866 | - Display the errors in your component, and add aria labels to improve accessibility. 1867 | 1868 | --- 1869 | 1870 | ## Adding Authentication 1871 | 1872 | Your application is almost ready, in the next chapter, you'll learn how to add authentication to your application using **NextAuth.js**. 1873 | 1874 | In this chapter... 1875 | 1876 | Here are the topics we’ll cover 1877 | 1878 | - What is authentication. 1879 | 1880 | - How to add authentication to your app using NextAuth.js. 1881 | 1882 | - How to use Middleware to redirect users and protect your routes. 1883 | 1884 | - How to use React's `useFormStatus` and `useFormState` to handle pending states and form errors. 1885 | 1886 | ### What is authentication? 1887 | 1888 | Authentication is a key part of many web applications today. It's how a system checks if the user is who they say they are. 1889 | 1890 | A secure website often uses multiple ways to check a user's identity for enhanced security. For instance, after entering your username and password, the site may send a verification code to your device or use an external app like Google Authenticator. This 2-factor authentication (2FA) helps increase security. Even if someone learns your password, they can't access your account without your unique token. 1891 | 1892 | ### Authentication vs. Authorization 1893 | 1894 | In web development, authentication and authorization serve different roles: 1895 | 1896 | Authentication is about making sure the user is who they say they are. You're proving your identity with something you have like a username and password. 1897 | Authorization is the next step. Once a user's identity is confirmed, authorization decides what parts of the application they are allowed to use. 1898 | So, authentication checks who you are, and authorization determines what you can do or access in the application. 1899 | 1900 | ### Creating the login route 1901 | 1902 | Start by creating a new route in your application called /login and paste the following code: 1903 | 1904 | ```tsx 1905 | import AcmeLogo from '@/app/ui/acme-logo'; 1906 | import LoginForm from '@/app/ui/login-form'; 1907 | 1908 | export default function LoginPage() { 1909 | return ( 1910 |
1911 |
1912 |
1913 |
1914 | 1915 |
1916 |
1917 | 1918 |
1919 |
1920 | ); 1921 | } 1922 | ``` 1923 | 1924 | ### NextAuth.js 1925 | 1926 | We will be using NextAuth.js to add authentication to your application. NextAuth.js abstracts away much of the complexity involved in managing sessions, sign-in and sign-out, and other aspects of authentication. While you can manually implement these features, the process can be time-consuming and error-prone. NextAuth.js simplifies the process, providing a unified solution for auth in Next.js applications. 1927 | 1928 | **Setting up NextAuth.js** 1929 | 1930 | Let's set up NextAuth.js in your project. Run the following command in your terminal: 1931 | 1932 | ```bash 1933 | npm install next-auth@beta bcrypt 1934 | ``` 1935 | 1936 | Here, you're installing the beta version of NextAuth.js, which is compatible with Next.js 14. You're also installing bcrypt, which is a library that will help you hash passwords. 1937 | 1938 | Next, generate a secret key for your application. This key is used to encrypt cookies, ensuring the security of user sessions. You can do this by running the following command in your terminal: 1939 | 1940 | ```bash 1941 | openssl rand -base64 32 1942 | ``` 1943 | 1944 | Then, in your .env file, you'll notice two variables: `AUTH_SECRET` and `AUTH_URL`. 1945 | 1946 | Add your generated key to `AUTH_SECRET`: 1947 | 1948 | ```bash 1949 | AUTH_SECRET=your-secret-key 1950 | AUTH_URL=http://localhost:3000/api/auth 1951 | ``` 1952 | 1953 | For auth to work in production, you'll need to update your environment variables in your Vercel project too. Check out this guide on how to add environment variables on Vercel. 1954 | 1955 | Adding the pages option 1956 | Create an auth.config.ts file at the root of our project that exports an authConfig object. This object will contain the configuration options for NextAuth.js. For now, it will only contain the pages option: 1957 | 1958 | ```ts 1959 | import type { NextAuthConfig } from 'next-auth'; 1960 | 1961 | export const authConfig = { 1962 | pages: { 1963 | signIn: '/login', 1964 | }, 1965 | }; 1966 | ``` 1967 | 1968 | You can use the pages option to specify the route for custom sign-in, sign-out, and error pages. It is not required, but if you don't provide it, NextAuth.js will use its default sign-in, sign-out, and error pages. By adding signIn: '/login' into our pages option, the user will be redirected to our custom login page, rather than the NextAuth.js default page. 1969 | 1970 | ### Protecting your routes with Next.js Middleware 1971 | 1972 | Next, add the logic to protect your routes. This will prevent users from accessing the dashboard pages unless they are logged in. 1973 | 1974 | ```ts 1975 | import type { NextAuthConfig } from 'next-auth'; 1976 | 1977 | export const authConfig = { 1978 | providers: [], 1979 | pages: { 1980 | signIn: '/login', 1981 | }, 1982 | callbacks: { 1983 | authorized({ auth, request: { nextUrl } }) { 1984 | const isLoggedIn = !!auth?.user; 1985 | const isOnDashboard = nextUrl.pathname.startsWith('/dashboard'); 1986 | if (isOnDashboard) { 1987 | if (isLoggedIn) return true; 1988 | return false; // Redirect unauthenticated users to login page 1989 | } else if (isLoggedIn) { 1990 | return Response.redirect(new URL('/dashboard', nextUrl)); 1991 | } 1992 | return true; 1993 | }, 1994 | }, 1995 | } satisfies NextAuthConfig; 1996 | 1997 | ``` 1998 | 1999 | The authorized callback is used to verify if the request is authorized to access a page via Next.js Middleware. It is called before a request is completed, and it receives an object with the auth and request properties. The auth property contains the user's session, and the request property contains the incoming request. 2000 | 2001 | Next, you will need to import the authConfig object into a Middleware file. In the root of your project, create a file called middleware.ts and paste the following code: 2002 | 2003 | ```ts 2004 | import NextAuth from 'next-auth'; 2005 | import { authConfig } from './auth.config'; 2006 | 2007 | export default NextAuth(authConfig).auth; 2008 | 2009 | export const config = { 2010 | // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher 2011 | matcher: ['/((?!api|_next/static|_next/image|.png).*)'], 2012 | }; 2013 | ``` 2014 | Here you're initializing NextAuth.js with the authConfig object and exporting the auth property. You're also using the matcher option from Middleware to specify that it should run on specific paths. 2015 | 2016 | The advantage of employing Middleware for this task is that the protected routes will not even start rendering until the Middleware verifies the authentication, enhancing both the security and performance of your application. 2017 | 2018 | ### Password hashing 2019 | 2020 | To store passwords securely, you will need to hash them. This process converts the password into a fixed-length string of characters, which appears random, providing a layer of security even if the hash is exposed. 2021 | 2022 | In your seed.js file, we've used bcrypt to hash the password before storing it in the database. You can use bcrypt to compare that the password entered by the user matches the one in the database. 2023 | 2024 | However, bcrypt relies on Node.js APIs not available in Next.js Middleware. To solve this, you will need to create a separate file that imports bcrypt. The new file will not be imported into your Middleware file. 2025 | 2026 | Create a new file called auth.ts that spreads your authConfig object: 2027 | 2028 | ```ts 2029 | import NextAuth from 'next-auth'; 2030 | import { authConfig } from './auth.config'; 2031 | 2032 | export const { auth, signIn, signOut } = NextAuth({ 2033 | ...authConfig, 2034 | }); 2035 | ``` 2036 | 2037 | ### Adding Credentials provider 2038 | 2039 | Next, you will need to add the providers option for NextAuth.js. providers is an array where you list different login options such as Google or GitHub. For this course, we will focus on using the Credentials provider only. 2040 | 2041 | The Credentials provider allows users to log in with a username and a password. 2042 | 2043 | >Good to know: 2044 | > 2045 | >Although we're using the Credentials provider, it's generally recommended to use alternative providers such as OAuth or email providers. See the NextAuth.js docs for a full list of options. 2046 | 2047 | ### Adding the sign in functionality 2048 | 2049 | You can use the authorize function to handle the authentication logic. Similarly to Server Actions, you can use zod to validate the email and password before checking if the user exists in the database and after validating the credentials, create a new getUser function that queries the user from the database. 2050 | 2051 | Then, call bcrypt.compare to check if the passwords match. 2052 | 2053 | Finally, if the passwords match you want to return the user, otherwise, return null to prevent the user from logging in. 2054 | 2055 | ### Updating the login form 2056 | 2057 | Now you need to connect the auth logic with your login form. In your actions.ts file, create a new action called authenticate. This action should import the signIn function from auth.ts. 2058 | 2059 | If there's a 'CredentialSignin' error, you want to return it so that you can show an appropriate error message. 2060 | 2061 | Finally, in your login-form.tsx component, you can use React's useFormState to call the server action and handle form errors, and use useFormStatus to handle the pending state of the form. 2062 | 2063 | ### Adding the logout functionality 2064 | 2065 | To add the logout functionality, call the signOut function from auth.ts in your \ component. 2066 | 2067 | **Try it out** 2068 | 2069 | Now, try it out. You should be able to log in and out of your application using the following credentials: 2070 | 2071 | - Email: user@nextmail.com 2072 | - Password: 123456 2073 | 2074 | --- 2075 | 2076 | ## Adding Metadata 2077 | 2078 | Finish your application by learning how to add metadata in preparation for sharing. 2079 | 2080 | Metadata is crucial for SEO and shareability. In this chapter, we'll discuss how you can add metadata to your Next.js application. 2081 | 2082 | In this chapter... 2083 | 2084 | Here are the topics we’ll cover 2085 | 2086 | - What metadata is. 2087 | 2088 | - Types of metadata. 2089 | 2090 | - How to add an Open Graph image using metadata. 2091 | 2092 | - How to add a favicon using metadata. 2093 | 2094 | ### What is metadata? 2095 | 2096 | In web development, metadata provides additional details about a webpage. Metadata is not visible to the users visiting the page. Instead, it works behind the scenes, embedded within the page's HTML, usually within the element. This hidden information is crucial for search engines and other systems that need to understand your webpage's content better. 2097 | 2098 | ### Why is metadata important? 2099 | 2100 | Metadata plays a significant role in enhancing a webpage's SEO, making it more accessible and understandable for search engines and social media platforms. Proper metadata helps search engines effectively index webpages, improving their ranking in search results. Additionally, metadata like Open Graph improves the appearance of shared links on social media, making the content more appealing and informative for users. 2101 | 2102 | ## Types of metadata 2103 | 2104 | There are various types of metadata, each serving a unique purpose. Some common types include: 2105 | 2106 | Title Metadata: Responsible for the title of a webpage that is displayed on the browser tab. It's crucial for SEO as it helps search engines understand what the webpage is about. 2107 | 2108 | ```html 2109 | Page Title 2110 | ``` 2111 | 2112 | Description Metadata: This metadata provides a brief overview of the webpage content and is often displayed in search engine results. 2113 | 2114 | ```html 2115 | 2116 | ``` 2117 | 2118 | Keyword Metadata: This metadata includes the keywords related to the webpage content, helping search engines index the page. 2119 | 2120 | ```html 2121 | 2122 | ``` 2123 | 2124 | Open Graph Metadata: This metadata enhances the way a webpage is represented when shared on social media platforms, providing information such as the title, description, and preview image. 2125 | 2126 | ```html 2127 | 2128 | 2129 | 2130 | ``` 2131 | 2132 | Favicon Metadata: This metadata links the favicon (a small icon) to the webpage, displayed in the browser's address bar or tab. 2133 | 2134 | ```html 2135 | 2136 | ``` 2137 | 2138 | ### Adding metadata 2139 | 2140 | 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: 2141 | 2142 | - Config-based: Export a [static metadata object](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-object) or a [dynamic generateMetadata function](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) in a layout.js or page.js file. 2143 | 2144 | - File-based: Next.js has a range special files are specifically recognized for metadata purposes: 2145 | 2146 | - favicon.ico, apple-icon.jpg, and icon.jpg: Utilized for favicons and icons 2147 | - opengraph-image.jpg and twitter-image.jpg: Employed for social media images 2148 | - robots.txt: Provides instructions for search engine crawling 2149 | - sitemap.xml: Offers information about the website's structure 2150 | 2151 | You have the flexibility to use these files for static metadata, or you can generate them programmatically within your project. 2152 | 2153 | With both these options, Next.js will automatically generate the relevant \ elements for your pages. 2154 | 2155 | ### Favicon and Open Graph image 2156 | 2157 | In your /public folder, you'll notice you have two images: favicon.ico and opengraph-image.jpg. 2158 | 2159 | Move these images to the root of your /app folder. 2160 | 2161 | After doing this, Next.js will automatically identify and use these files as your favicon and OG image. You can verify this by checking the \ element of your application in Dev Tools. 2162 | 2163 | > Good to know: You can also create dynamic OG images using the `ImageResponse` constructor. 2164 | 2165 | ### Page title and descriptions 2166 | 2167 | You can also include a metadata object from any layout.js or page.js file to add additional page information like title and description. Any metadata in layout.js will be inherited by all pages that use it. 2168 | 2169 | In your root layout, create a new metadata object with the following fields: 2170 | 2171 | ```ts 2172 | import { Metadata } from 'next'; 2173 | 2174 | export const metadata: Metadata = { 2175 | title: 'Acme Dashboard', 2176 | description: 'The official Next.js Course Dashboard, built with App Router.', 2177 | metadataBase: new URL('https://next-learn-dashboard.vercel.sh'), 2178 | }; 2179 | 2180 | export default function Page() { 2181 | // ... 2182 | } 2183 | ``` 2184 | 2185 | Next.js will automatically add the title and metadata to your application. 2186 | 2187 | But what if you want to add a custom title for a specific page? You can do this by adding a metadata object to the page itself. Metadata in nested pages will override the metadata in the parent. 2188 | 2189 | This is ok, but it's not very DRY. You're repeating the title of the application in every page, and if something changed, like the company name, you'd have to update it in every page. 2190 | 2191 | 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. 2192 | 2193 | In your root layout, update the metadata object to include a template. 2194 | 2195 | ```ts 2196 | import { Metadata } from 'next'; 2197 | 2198 | export const metadata: Metadata = { 2199 | title: { 2200 | template: '%s | Acme Dashboard', 2201 | default: 'Acme Dashboard', 2202 | }, 2203 | description: 'The official Next.js Learn Dashboard built with App Router.', 2204 | metadataBase: new URL('https://next-learn-dashboard.vercel.sh'), 2205 | }; 2206 | ``` 2207 | 2208 | ### Practice: Adding metadata 2209 | 2210 | Now that you've learned about metadata, practice by adding titles to your other pages: 2211 | 2212 | 1. /login page. 2213 | 2. /dashboard/ page. 2214 | 3. /dashboard/customers page. 2215 | 4. /dashboard/invoices/create page. 2216 | 5. /dashboard/invoices/[id]/edit page. 2217 | 2218 | The Next.js Metadata API is powerful and flexible, giving you full control over your application's metadata. Here, we've shown you how to add some basic metadata, but you can add multiple fields, including keywords, robots, canonical, and more. Feel free to explore the [documentation](https://nextjs.org/docs/app/api-reference/functions/generate-metadata), and add any additional metadata you want to your application. 2219 | 2220 | --- 2221 | 2222 | ## Next Steps 2223 | 2224 | Congratulations! You've completed the Next.js dashboard course where you learned about the main features of Next.js and best practices for building web applications. 2225 | 2226 | But this is just the beginning—Next.js has many other features. It's designed to help you build small side projects, your next startup idea, or even large-scale applications with your team. 2227 | 2228 | Here are some resources to continue exploring Next.js: 2229 | 2230 | - [Next.js Documentation](https://nextjs.org/docs) 2231 | - [Next.js Templates](https://vercel.com/templates?framework=next.js) 2232 | - [Next.js Repository](https://github.com/vercel/next.js) 2233 | - [Vercel YouTube](https://www.youtube.com/@VercelHQ/videos) -------------------------------------------------------------------------------- /app/dashboard/(overview)/loading.tsx: -------------------------------------------------------------------------------- 1 | import DashboardSkeleton from "@/app/ui/skeletons"; 2 | 3 | export default function Loading(){ 4 | return 5 | } -------------------------------------------------------------------------------- /app/dashboard/(overview)/page.tsx: -------------------------------------------------------------------------------- 1 | import CardWrapper, { Card } from '@/app/ui/dashboard/cards'; 2 | import RevenueChart from '@/app/ui/dashboard/revenue-chart'; 3 | import LatestInvoices from '@/app/ui/dashboard/latest-invoices'; 4 | import { lusitana } from '@/app/ui/fonts'; 5 | import { Suspense } from 'react'; 6 | import { CardsSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton } from '@/app/ui/skeletons'; 7 | import { Metadata } from 'next'; 8 | 9 | export const metadata: Metadata = { 10 | title: 'Home', 11 | }; 12 | 13 | export default async function Page() { 14 | return ( 15 |
16 |

17 | Dashboard 18 |

19 |
20 | }> 21 | 22 | 23 | {/* 24 | 25 | 26 | */} 31 |
32 |
33 | }> 34 | 35 | 36 | }> 37 | 38 | 39 |
40 |
41 | ); 42 | } -------------------------------------------------------------------------------- /app/dashboard/customers/page.tsx: -------------------------------------------------------------------------------- 1 | import CustomersTable from '@/app/ui/customers/table'; 2 | import { Metadata } from 'next'; 3 | import { Suspense } from 'react'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'Customers', 7 | }; 8 | 9 | export default async function CustomersPage({ 10 | searchParams, 11 | }: { 12 | searchParams?: { 13 | query?: string; 14 | }; 15 | }) { 16 | 17 | const query = searchParams?.query || ''; 18 | return ( 19 | Loading...

}> 20 | 21 | 22 | ) 23 | } -------------------------------------------------------------------------------- /app/dashboard/invoices/[id]/edit/not-found.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import { FaceFrownIcon } from '@heroicons/react/24/outline'; 3 | 4 | export default function NotFound() { 5 | return ( 6 |
7 | 8 |

404 Not Found

9 |

Could not find the requested invoice.

10 | 14 | Go Back 15 | 16 |
17 | ); 18 | } -------------------------------------------------------------------------------- /app/dashboard/invoices/[id]/edit/page.tsx: -------------------------------------------------------------------------------- 1 | import Form from '@/app/ui/invoices/edit-form'; 2 | import Breadcrumbs from '@/app/ui/invoices/breadcrumbs'; 3 | import { fetchCustomers, fetchInvoiceById } from '@/app/lib/data'; 4 | import { CustomerField, InvoiceForm } from '@/app/lib/definitions'; 5 | import { notFound } from 'next/navigation'; 6 | 7 | export default async function Page({ params }: { params: { id: string } }) { 8 | 9 | const id = params.id; 10 | const [invoice, customers] : [InvoiceForm | undefined , CustomerField[] | undefined] = await Promise.all([ 11 | fetchInvoiceById(id), 12 | fetchCustomers(), 13 | ]); 14 | 15 | if (!invoice) { 16 | notFound(); 17 | } 18 | 19 | return ( 20 |
21 | 31 |
32 |
33 | ); 34 | } -------------------------------------------------------------------------------- /app/dashboard/invoices/create/page.tsx: -------------------------------------------------------------------------------- 1 | import Form from '@/app/ui/invoices/create-form'; 2 | import Breadcrumbs from '@/app/ui/invoices/breadcrumbs'; 3 | import { fetchCustomers } from '@/app/lib/data'; 4 | 5 | export default async function Page() { 6 | const customers = await fetchCustomers(); 7 | 8 | return ( 9 |
10 | 20 | 21 |
22 | ); 23 | } -------------------------------------------------------------------------------- /app/dashboard/invoices/error.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { useEffect } from 'react'; 4 | 5 | export default function Error({ 6 | error, 7 | reset, 8 | }: { 9 | error: Error & { digest?: string }; 10 | reset: () => void; 11 | }) { 12 | useEffect(() => { 13 | // Optionally log the error to an error reporting service 14 | console.error(error); 15 | }, [error]); 16 | 17 | return ( 18 |
19 |

Something went wrong!

20 | 29 |
30 | ); 31 | } -------------------------------------------------------------------------------- /app/dashboard/invoices/page.tsx: -------------------------------------------------------------------------------- 1 | import Pagination from '@/app/ui/invoices/pagination'; 2 | import Search from '@/app/ui/search'; 3 | import Table from '@/app/ui/invoices/table'; 4 | import { CreateInvoice } from '@/app/ui/invoices/buttons'; 5 | import { lusitana } from '@/app/ui/fonts'; 6 | import { InvoicesTableSkeleton } from '@/app/ui/skeletons'; 7 | import { Suspense } from 'react'; 8 | import { fetchInvoicesPages } from '@/app/lib/data'; 9 | import { Metadata } from 'next'; 10 | 11 | export const metadata: Metadata = { 12 | title: 'Invoices', 13 | }; 14 | 15 | export default async function Page({ 16 | searchParams, 17 | }: { 18 | searchParams?: { 19 | query?: string; 20 | page?: string; 21 | }; 22 | }) { 23 | 24 | const query = searchParams?.query || ''; 25 | const currentPage = Number(searchParams?.page) || 1; 26 | const totalPages = await fetchInvoicesPages(query); 27 | 28 | return ( 29 |
30 |
31 |

Invoices

32 |
33 |
34 | 35 | 36 |
37 | }> 38 |
39 | 40 |
41 | 42 |
43 | 44 | ); 45 | } -------------------------------------------------------------------------------- /app/dashboard/layout.tsx: -------------------------------------------------------------------------------- 1 | import SideNav from '@/app/ui/dashboard/sidenav'; 2 | 3 | export default function Layout({ children }: { children: React.ReactNode }) { 4 | return ( 5 |
6 |
7 | 8 |
9 |
{children}
10 |
11 | ); 12 | } -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/app/favicon.ico -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import '@/app/ui/global.css'; 2 | import { inter } from '@/app/ui/fonts'; 3 | import { Metadata } from 'next'; 4 | 5 | export const metadata: Metadata = { 6 | title: { 7 | template: '%s | Acme Dashboard | @lllariogonzalez', 8 | default: 'Acme Dashboard by @lllariogonzalez', 9 | }, 10 | description: 'The official Next.js Course Dashboard, built with App Router.', 11 | metadataBase: new URL('https://nextjs-dashboard-acme.vercel.app'), 12 | authors: [{name: 'Mario Gonzalez', url:'https://www.linkedin.com/in/lllariogonzalez'}], 13 | keywords: ['Next.js 14', 'Acme', 'Dashboard', 'nextjs.org/learn', 'Server Actions'], 14 | openGraph: { 15 | title: 'Acme Dashboard', 16 | description: 'The official Next.js Learn Dashboard built with App Router.', 17 | url: 'https://nextjs-dashboard-acme.vercel.app', 18 | type: 'website', 19 | }, 20 | twitter: { 21 | site: '@acme', 22 | description:'The official Next.js Learn Dashboard built with App Router.', 23 | title:'Acme Dashboard by @lllariogonzalez', 24 | creator:'@lllariogonzalez', 25 | }, 26 | }; 27 | 28 | export default function RootLayout({ 29 | children, 30 | }: { 31 | children: React.ReactNode; 32 | }) { 33 | return ( 34 | 35 | {children} 36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /app/lib/actions.ts: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | import { z } from 'zod'; 4 | import { sql } from '@vercel/postgres'; 5 | import { revalidatePath } from 'next/cache'; 6 | import { redirect } from 'next/navigation'; 7 | import { signIn } from '@/auth'; 8 | 9 | const InvoiceSchema = z.object({ 10 | id: z.string(), 11 | customerId: z.string({ 12 | invalid_type_error: 'Please select a customer.', 13 | }), 14 | amount: z.coerce 15 | .number() 16 | .gt(0, { message: 'Please enter an amount greater than $0.' }), 17 | status: z.enum(['pending', 'paid'], { 18 | invalid_type_error: 'Please select an invoice status.', 19 | }), 20 | date: z.string(), 21 | }); 22 | 23 | const CreateInvoice = InvoiceSchema.omit({ id: true, date: true }); 24 | 25 | export type State = { 26 | errors?: { 27 | customerId?: string[]; 28 | amount?: string[]; 29 | status?: string[]; 30 | }; 31 | message?: string | null; 32 | }; 33 | 34 | export async function createInvoice(prevState: State, formData: FormData) { 35 | 36 | // Validate form fields using Zod 37 | const validatedFields = CreateInvoice.safeParse({ 38 | customerId: formData.get('customerId'), 39 | amount: formData.get('amount'), 40 | status: formData.get('status'), 41 | }); 42 | 43 | // If form validation fails, return errors early. Otherwise, continue. 44 | if (!validatedFields.success) { 45 | return { 46 | errors: validatedFields.error.flatten().fieldErrors, 47 | message: 'Missing Fields. Failed to Create Invoice.', 48 | }; 49 | } 50 | 51 | // Prepare data for insertion into the database 52 | const { customerId, amount, status } = validatedFields.data; 53 | const amountInCents = amount * 100; 54 | const date = new Date().toISOString().split('T')[0]; 55 | 56 | // Test it out: 57 | // console.log(); 58 | // Insert data into the database 59 | try{ 60 | await sql` 61 | INSERT INTO invoices (customer_id, amount, status, date) 62 | VALUES (${customerId}, ${amountInCents}, ${status}, ${date})`; 63 | } catch (error) { 64 | return { 65 | message: 'Database Error: Failed to Create Invoice.', 66 | }; 67 | } 68 | 69 | // Revalidate the cache for the invoices page and redirect the user. 70 | revalidatePath('/dashboard/invoices'); 71 | redirect('/dashboard/invoices'); 72 | } 73 | 74 | // Use Zod to update the expected types 75 | const UpdateInvoice = InvoiceSchema.omit({ id: true, date: true }); 76 | 77 | // ... 78 | 79 | export async function updateInvoice( 80 | id: string, 81 | prevState: State, 82 | formData: FormData 83 | ){ 84 | 85 | // Validate form fields using Zod 86 | const validatedFields = UpdateInvoice.safeParse({ 87 | customerId: formData.get('customerId'), 88 | amount: formData.get('amount'), 89 | status: formData.get('status'), 90 | }); 91 | 92 | // If form validation fails, return errors early. Otherwise, continue. 93 | if (!validatedFields.success) { 94 | return { 95 | errors: validatedFields.error.flatten().fieldErrors, 96 | message: 'Missing Fields. Failed to Update Invoice.', 97 | }; 98 | } 99 | 100 | // Prepare data for insertion into the database 101 | const { customerId, amount, status } = validatedFields.data; 102 | const amountInCents = amount * 100; 103 | // Insert data into the database 104 | try { 105 | await sql` 106 | UPDATE invoices 107 | SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} 108 | WHERE id = ${id} 109 | `; 110 | } catch (error) { 111 | return { message: 'Database Error: Failed to Update Invoice.' }; 112 | } 113 | // Revalidate the cache for the invoices page and redirect the user. 114 | revalidatePath('/dashboard/invoices'); 115 | redirect('/dashboard/invoices'); 116 | } 117 | 118 | export async function deleteInvoice(id: string) { 119 | // throw new Error('Failed to Delete Invoice'); 120 | try { 121 | await sql`DELETE FROM invoices WHERE id = ${id}`; 122 | revalidatePath('/dashboard/invoices'); 123 | } catch (error) { 124 | return { message: 'Database Error: Failed to Delete Invoice.' }; 125 | } 126 | } 127 | 128 | 129 | export async function authenticate( 130 | prevState: string | undefined, 131 | formData: FormData, 132 | ) { 133 | try { 134 | await signIn('credentials', Object.fromEntries(formData)); 135 | } catch (error) { 136 | if ((error as Error).message.includes('CredentialsSignin')) { 137 | return 'CredentialSignin'; 138 | } 139 | throw error; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /app/lib/data.ts: -------------------------------------------------------------------------------- 1 | import { sql } from '@vercel/postgres'; 2 | import { 3 | CustomerField, 4 | CustomersTable, 5 | InvoiceForm, 6 | InvoicesTable, 7 | LatestInvoiceRaw, 8 | User, 9 | Revenue, 10 | } from './definitions'; 11 | import { formatCurrency } from './utils'; 12 | import { unstable_noStore as noStore } from 'next/cache'; 13 | 14 | export async function fetchRevenue() { 15 | // Add noStore() here prevent the response from being cached. 16 | // This is equivalent to in fetch(..., {cache: 'no-store'}). 17 | noStore(); 18 | try { 19 | // Artificially delay a reponse for demo purposes. 20 | // Don't do this in real life :) 21 | 22 | // console.log('Fetching revenue data...'); 23 | await new Promise((resolve) => setTimeout(resolve, 3000)); 24 | 25 | const data = await sql`SELECT * FROM revenue`; 26 | 27 | // console.log('Data fetch complete after 3 seconds.'); 28 | 29 | return data.rows; 30 | } catch (error) { 31 | console.error('Database Error:', error); 32 | throw new Error('Failed to fetch revenue data.'); 33 | } 34 | } 35 | 36 | export async function fetchLatestInvoices() { 37 | noStore(); 38 | try { 39 | const data = await sql` 40 | SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id 41 | FROM invoices 42 | JOIN customers ON invoices.customer_id = customers.id 43 | ORDER BY invoices.date DESC 44 | LIMIT 5`; 45 | 46 | const latestInvoices = data.rows.map((invoice) => ({ 47 | ...invoice, 48 | amount: formatCurrency(invoice.amount), 49 | })); 50 | return latestInvoices; 51 | } catch (error) { 52 | console.error('Database Error:', error); 53 | throw new Error('Failed to fetch the latest invoices.'); 54 | } 55 | } 56 | 57 | export async function fetchCardData() { 58 | noStore(); 59 | try { 60 | // You can probably combine these into a single SQL query 61 | // However, we are intentionally splitting them to demonstrate 62 | // how to initialize multiple queries in parallel with JS. 63 | const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`; 64 | const customerCountPromise = sql`SELECT COUNT(*) FROM customers`; 65 | const invoiceStatusPromise = sql`SELECT 66 | SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid", 67 | SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending" 68 | FROM invoices`; 69 | 70 | const data = await Promise.all([ 71 | invoiceCountPromise, 72 | customerCountPromise, 73 | invoiceStatusPromise, 74 | ]); 75 | 76 | const numberOfInvoices = Number(data[0].rows[0].count ?? '0'); 77 | const numberOfCustomers = Number(data[1].rows[0].count ?? '0'); 78 | const totalPaidInvoices = formatCurrency(data[2].rows[0].paid ?? '0'); 79 | const totalPendingInvoices = formatCurrency(data[2].rows[0].pending ?? '0'); 80 | 81 | return { 82 | numberOfCustomers, 83 | numberOfInvoices, 84 | totalPaidInvoices, 85 | totalPendingInvoices, 86 | }; 87 | } catch (error) { 88 | console.error('Database Error:', error); 89 | throw new Error('Failed to card data.'); 90 | } 91 | } 92 | 93 | const ITEMS_PER_PAGE = 6; 94 | export async function fetchFilteredInvoices( query: string, currentPage: number,) { 95 | noStore(); 96 | const offset = (currentPage - 1) * ITEMS_PER_PAGE; 97 | 98 | try { 99 | const invoices = await sql` 100 | SELECT 101 | invoices.id, 102 | invoices.amount, 103 | invoices.date, 104 | invoices.status, 105 | customers.name, 106 | customers.email, 107 | customers.image_url 108 | FROM invoices 109 | JOIN customers ON invoices.customer_id = customers.id 110 | WHERE 111 | customers.name ILIKE ${`%${query}%`} OR 112 | customers.email ILIKE ${`%${query}%`} OR 113 | invoices.amount::text ILIKE ${`%${query}%`} OR 114 | invoices.date::text ILIKE ${`%${query}%`} OR 115 | invoices.status ILIKE ${`%${query}%`} 116 | ORDER BY invoices.date DESC 117 | LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset} 118 | `; 119 | 120 | return invoices.rows; 121 | } catch (error) { 122 | console.error('Database Error:', error); 123 | throw new Error('Failed to fetch invoices.'); 124 | } 125 | } 126 | 127 | export async function fetchInvoicesPages(query: string) { 128 | noStore(); 129 | try { 130 | const count = await sql`SELECT COUNT(*) 131 | FROM invoices 132 | JOIN customers ON invoices.customer_id = customers.id 133 | WHERE 134 | customers.name ILIKE ${`%${query}%`} OR 135 | customers.email ILIKE ${`%${query}%`} OR 136 | invoices.amount::text ILIKE ${`%${query}%`} OR 137 | invoices.date::text ILIKE ${`%${query}%`} OR 138 | invoices.status ILIKE ${`%${query}%`} 139 | `; 140 | 141 | const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE); 142 | return totalPages; 143 | } catch (error) { 144 | console.error('Database Error:', error); 145 | throw new Error('Failed to fetch total number of invoices.'); 146 | } 147 | } 148 | 149 | export async function fetchInvoiceById(id: string) { 150 | noStore(); 151 | try { 152 | const data = await sql` 153 | SELECT 154 | invoices.id, 155 | invoices.customer_id, 156 | invoices.amount, 157 | invoices.status 158 | FROM invoices 159 | WHERE invoices.id = ${id}; 160 | `; 161 | 162 | const invoice = data.rows.map((invoice) => ({ 163 | ...invoice, 164 | // Convert amount from cents to dollars 165 | amount: invoice.amount / 100, 166 | })); 167 | 168 | return invoice[0]; 169 | } catch (error) { 170 | console.error('Database Error:', error); 171 | } 172 | } 173 | 174 | export async function fetchCustomers() { 175 | noStore(); 176 | try { 177 | const data = await sql` 178 | SELECT 179 | id, 180 | name 181 | FROM customers 182 | ORDER BY name ASC 183 | `; 184 | 185 | const customers = data.rows; 186 | return customers; 187 | } catch (err) { 188 | console.error('Database Error:', err); 189 | throw new Error('Failed to fetch all customers.'); 190 | } 191 | } 192 | 193 | export async function fetchFilteredCustomers(query: string) { 194 | noStore(); 195 | try { 196 | const data = await sql` 197 | SELECT 198 | customers.id, 199 | customers.name, 200 | customers.email, 201 | customers.image_url, 202 | COUNT(invoices.id) AS total_invoices, 203 | SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending, 204 | SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid 205 | FROM customers 206 | LEFT JOIN invoices ON customers.id = invoices.customer_id 207 | WHERE 208 | customers.name ILIKE ${`%${query}%`} OR 209 | customers.email ILIKE ${`%${query}%`} 210 | GROUP BY customers.id, customers.name, customers.email, customers.image_url 211 | ORDER BY customers.name ASC 212 | `; 213 | 214 | const customers = data.rows.map((customer) => ({ 215 | ...customer, 216 | total_pending: formatCurrency(customer.total_pending), 217 | total_paid: formatCurrency(customer.total_paid), 218 | })); 219 | 220 | return customers; 221 | } catch (err) { 222 | console.error('Database Error:', err); 223 | throw new Error('Failed to fetch customer table.'); 224 | } 225 | } 226 | 227 | export async function getUser(email: string) { 228 | noStore(); 229 | try { 230 | const user = await sql`SELECT * from USERS where email=${email}`; 231 | return user.rows[0] as User; 232 | } catch (error) { 233 | console.error('Failed to fetch user:', error); 234 | throw new Error('Failed to fetch user.'); 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /app/lib/definitions.ts: -------------------------------------------------------------------------------- 1 | // This file contains type definitions for your data. 2 | // It describes the shape of the data, and what data type each property should accept. 3 | // For simplicity of teaching, we're manually defining these types. 4 | // However, these types are generated automatically if you're using an ORM such as Prisma. 5 | export type User = { 6 | id: string; 7 | name: string; 8 | email: string; 9 | password: string; 10 | }; 11 | 12 | export type Customer = { 13 | id: string; 14 | name: string; 15 | email: string; 16 | image_url: string; 17 | }; 18 | 19 | export type Invoice = { 20 | id: string; 21 | customer_id: string; 22 | amount: number; 23 | date: string; 24 | // In TypeScript, this is called a string union type. 25 | // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'. 26 | status: 'pending' | 'paid'; 27 | }; 28 | 29 | export type Revenue = { 30 | month: string; 31 | revenue: number; 32 | }; 33 | 34 | export type LatestInvoice = { 35 | id: string; 36 | name: string; 37 | image_url: string; 38 | email: string; 39 | amount: string; 40 | }; 41 | 42 | // The database returns a number for amount, but we later format it to a string with the formatCurrency function 43 | export type LatestInvoiceRaw = Omit & { 44 | amount: number; 45 | }; 46 | 47 | export type InvoicesTable = { 48 | id: string; 49 | customer_id: string; 50 | name: string; 51 | email: string; 52 | image_url: string; 53 | date: string; 54 | amount: number; 55 | status: 'pending' | 'paid'; 56 | }; 57 | 58 | export type CustomersTable = { 59 | id: string; 60 | name: string; 61 | email: string; 62 | image_url: string; 63 | total_invoices: number; 64 | total_pending: number; 65 | total_paid: number; 66 | }; 67 | 68 | export type FormattedCustomersTable = { 69 | id: string; 70 | name: string; 71 | email: string; 72 | image_url: string; 73 | total_invoices: number; 74 | total_pending: string; 75 | total_paid: string; 76 | }; 77 | 78 | export type CustomerField = { 79 | id: string; 80 | name: string; 81 | }; 82 | 83 | export type InvoiceForm = { 84 | id: string; 85 | customer_id: string; 86 | amount: number; 87 | status: 'pending' | 'paid'; 88 | }; 89 | -------------------------------------------------------------------------------- /app/lib/placeholder-data.js: -------------------------------------------------------------------------------- 1 | // This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter: 2 | // https://nextjs.org/learn/dashboard-app/fetching-data 3 | const users = [ 4 | { 5 | id: '410544b2-4001-4271-9855-fec4b6a6442a', 6 | name: 'User', 7 | email: 'user@nextmail.com', 8 | password: '123456', 9 | }, 10 | ]; 11 | 12 | const customers = [ 13 | { 14 | id: '3958dc9e-712f-4377-85e9-fec4b6a6442a', 15 | name: 'Delba de Oliveira', 16 | email: 'delba@oliveira.com', 17 | image_url: '/customers/delba-de-oliveira.png', 18 | }, 19 | { 20 | id: '3958dc9e-742f-4377-85e9-fec4b6a6442a', 21 | name: 'Lee Robinson', 22 | email: 'lee@robinson.com', 23 | image_url: '/customers/lee-robinson.png', 24 | }, 25 | { 26 | id: '3958dc9e-737f-4377-85e9-fec4b6a6442a', 27 | name: 'Hector Simpson', 28 | email: 'hector@simpson.com', 29 | image_url: '/customers/hector-simpson.png', 30 | }, 31 | { 32 | id: '50ca3e18-62cd-11ee-8c99-0242ac120002', 33 | name: 'Steven Tey', 34 | email: 'steven@tey.com', 35 | image_url: '/customers/steven-tey.png', 36 | }, 37 | { 38 | id: '3958dc9e-787f-4377-85e9-fec4b6a6442a', 39 | name: 'Steph Dietz', 40 | email: 'steph@dietz.com', 41 | image_url: '/customers/steph-dietz.png', 42 | }, 43 | { 44 | id: '76d65c26-f784-44a2-ac19-586678f7c2f2', 45 | name: 'Michael Novotny', 46 | email: 'michael@novotny.com', 47 | image_url: '/customers/michael-novotny.png', 48 | }, 49 | { 50 | id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa', 51 | name: 'Evil Rabbit', 52 | email: 'evil@rabbit.com', 53 | image_url: '/customers/evil-rabbit.png', 54 | }, 55 | { 56 | id: '126eed9c-c90c-4ef6-a4a8-fcf7408d3c66', 57 | name: 'Emil Kowalski', 58 | email: 'emil@kowalski.com', 59 | image_url: '/customers/emil-kowalski.png', 60 | }, 61 | { 62 | id: 'cc27c14a-0acf-4f4a-a6c9-d45682c144b9', 63 | name: 'Amy Burns', 64 | email: 'amy@burns.com', 65 | image_url: '/customers/amy-burns.png', 66 | }, 67 | { 68 | id: '13d07535-c59e-4157-a011-f8d2ef4e0cbb', 69 | name: 'Balazs Orban', 70 | email: 'balazs@orban.com', 71 | image_url: '/customers/balazs-orban.png', 72 | }, 73 | ]; 74 | 75 | const invoices = [ 76 | { 77 | customer_id: customers[0].id, 78 | amount: 15795, 79 | status: 'pending', 80 | date: '2022-12-06', 81 | }, 82 | { 83 | customer_id: customers[1].id, 84 | amount: 20348, 85 | status: 'pending', 86 | date: '2022-11-14', 87 | }, 88 | { 89 | customer_id: customers[4].id, 90 | amount: 3040, 91 | status: 'paid', 92 | date: '2022-10-29', 93 | }, 94 | { 95 | customer_id: customers[3].id, 96 | amount: 44800, 97 | status: 'paid', 98 | date: '2023-09-10', 99 | }, 100 | { 101 | customer_id: customers[5].id, 102 | amount: 34577, 103 | status: 'pending', 104 | date: '2023-08-05', 105 | }, 106 | { 107 | customer_id: customers[7].id, 108 | amount: 54246, 109 | status: 'pending', 110 | date: '2023-07-16', 111 | }, 112 | { 113 | customer_id: customers[6].id, 114 | amount: 666, 115 | status: 'pending', 116 | date: '2023-06-27', 117 | }, 118 | { 119 | customer_id: customers[3].id, 120 | amount: 32545, 121 | status: 'paid', 122 | date: '2023-06-09', 123 | }, 124 | { 125 | customer_id: customers[4].id, 126 | amount: 1250, 127 | status: 'paid', 128 | date: '2023-06-17', 129 | }, 130 | { 131 | customer_id: customers[5].id, 132 | amount: 8546, 133 | status: 'paid', 134 | date: '2023-06-07', 135 | }, 136 | { 137 | customer_id: customers[1].id, 138 | amount: 500, 139 | status: 'paid', 140 | date: '2023-08-19', 141 | }, 142 | { 143 | customer_id: customers[5].id, 144 | amount: 8945, 145 | status: 'paid', 146 | date: '2023-06-03', 147 | }, 148 | { 149 | customer_id: customers[2].id, 150 | amount: 8945, 151 | status: 'paid', 152 | date: '2023-06-18', 153 | }, 154 | { 155 | customer_id: customers[0].id, 156 | amount: 8945, 157 | status: 'paid', 158 | date: '2023-10-04', 159 | }, 160 | { 161 | customer_id: customers[2].id, 162 | amount: 1000, 163 | status: 'paid', 164 | date: '2022-06-05', 165 | }, 166 | ]; 167 | 168 | const revenue = [ 169 | { month: 'Jan', revenue: 2000 }, 170 | { month: 'Feb', revenue: 1800 }, 171 | { month: 'Mar', revenue: 2200 }, 172 | { month: 'Apr', revenue: 2500 }, 173 | { month: 'May', revenue: 2300 }, 174 | { month: 'Jun', revenue: 3200 }, 175 | { month: 'Jul', revenue: 3500 }, 176 | { month: 'Aug', revenue: 3700 }, 177 | { month: 'Sep', revenue: 2500 }, 178 | { month: 'Oct', revenue: 2800 }, 179 | { month: 'Nov', revenue: 3000 }, 180 | { month: 'Dec', revenue: 4800 }, 181 | ]; 182 | 183 | module.exports = { 184 | users, 185 | customers, 186 | invoices, 187 | revenue, 188 | }; 189 | -------------------------------------------------------------------------------- /app/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { Revenue } from './definitions'; 2 | 3 | export const formatCurrency = (amount: number) => { 4 | return (amount / 100).toLocaleString('en-US', { 5 | style: 'currency', 6 | currency: 'USD', 7 | }); 8 | }; 9 | 10 | export const formatDateToLocal = ( 11 | dateStr: string, 12 | locale: string = 'en-US', 13 | ) => { 14 | const date = new Date(dateStr); 15 | const options: Intl.DateTimeFormatOptions = { 16 | day: 'numeric', 17 | month: 'short', 18 | year: 'numeric', 19 | }; 20 | const formatter = new Intl.DateTimeFormat(locale, options); 21 | return formatter.format(date); 22 | }; 23 | 24 | export const generateYAxis = (revenue: Revenue[]) => { 25 | // Calculate what labels we need to display on the y-axis 26 | // based on highest record and in 1000s 27 | const yAxisLabels = []; 28 | const highestRecord = Math.max(...revenue.map((month) => month.revenue)); 29 | const topLabel = Math.ceil(highestRecord / 1000) * 1000; 30 | 31 | for (let i = topLabel; i >= 0; i -= 1000) { 32 | yAxisLabels.push(`$${i / 1000}K`); 33 | } 34 | 35 | return { yAxisLabels, topLabel }; 36 | }; 37 | 38 | export const generatePagination = (currentPage: number, totalPages: number) => { 39 | // If the total number of pages is 7 or less, 40 | // display all pages without any ellipsis. 41 | if (totalPages <= 7) { 42 | return Array.from({ length: totalPages }, (_, i) => i + 1); 43 | } 44 | 45 | // If the current page is among the first 3 pages, 46 | // show the first 3, an ellipsis, and the last 2 pages. 47 | if (currentPage <= 3) { 48 | return [1, 2, 3, '...', totalPages - 1, totalPages]; 49 | } 50 | 51 | // If the current page is among the last 3 pages, 52 | // show the first 2, an ellipsis, and the last 3 pages. 53 | if (currentPage >= totalPages - 2) { 54 | return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages]; 55 | } 56 | 57 | // If the current page is somewhere in the middle, 58 | // show the first page, an ellipsis, the current page and its neighbors, 59 | // another ellipsis, and the last page. 60 | return [ 61 | 1, 62 | '...', 63 | currentPage - 1, 64 | currentPage, 65 | currentPage + 1, 66 | '...', 67 | totalPages, 68 | ]; 69 | }; 70 | -------------------------------------------------------------------------------- /app/login/page.tsx: -------------------------------------------------------------------------------- 1 | import AcmeLogo from '@/app/ui/acme-logo'; 2 | import LoginForm from '@/app/ui/login-form'; 3 | import { Metadata } from 'next'; 4 | 5 | export const metadata: Metadata = { 6 | title: 'Login', 7 | }; 8 | 9 | export default function LoginPage() { 10 | return ( 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | ); 22 | } -------------------------------------------------------------------------------- /app/opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/app/opengraph-image.png -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import AcmeLogo from '@/app/ui/acme-logo'; 2 | import { lusitana } from '@/app/ui/fonts'; 3 | import Image from 'next/image'; 4 | import Link from 'next/link'; 5 | export default function Page() { 6 | return ( 7 |
8 |
9 | 10 |
11 |
12 |
13 |
14 |

15 | Welcome to Acme. This is the example for the{' '} 16 | 17 | Next.js Learn Course 18 | 19 | , brought to you by Vercel. 20 |

21 | 25 | Log in 26 | 27 |
28 |
29 | {/* Add Hero Images Here */} 30 | 37 | 44 |
45 |
46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /app/ui/acme-logo.tsx: -------------------------------------------------------------------------------- 1 | import { GlobeAltIcon } from '@heroicons/react/24/outline'; 2 | import { lusitana } from '@/app/ui/fonts'; 3 | 4 | export default function AcmeLogo() { 5 | return ( 6 |
9 | 10 |

Acme

11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /app/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | 3 | interface ButtonProps extends React.ButtonHTMLAttributes { 4 | children: React.ReactNode; 5 | } 6 | 7 | export function Button({ children, className, ...rest }: ButtonProps) { 8 | return ( 9 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /app/ui/customers/table.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import { lusitana } from '@/app/ui/fonts'; 3 | import Search from '@/app/ui/search'; 4 | import type { CustomersTable, FormattedCustomersTable } from '@/app/lib/definitions'; 5 | import { fetchFilteredCustomers } from '@/app/lib/data'; 6 | 7 | export default async function CustomersTable({query}:{query: string}) { 8 | 9 | const customers: FormattedCustomersTable[] = await fetchFilteredCustomers(query) 10 | 11 | return ( 12 |
13 |

14 | Customers 15 |

16 | 17 |
18 |
19 |
20 |
21 |
22 | {customers?.map((customer) => ( 23 |
27 |
28 |
29 |
30 |
31 | 38 |

{customer.name}

39 |
40 |
41 |

42 | {customer.email} 43 |

44 |
45 |
46 |
47 |
48 |

Pending

49 |

{customer.total_pending}

50 |
51 |
52 |

Paid

53 |

{customer.total_paid}

54 |
55 |
56 |
57 |

{customer.total_invoices} invoices

58 |
59 |
60 | ))} 61 |
62 |
63 | 64 | 65 | 68 | 71 | 74 | 77 | 80 | 81 | 82 | 83 | 84 | {customers.map((customer) => ( 85 | 86 | 98 | 101 | 104 | 107 | 110 | 111 | ))} 112 | 113 |
66 | Name 67 | 69 | Email 70 | 72 | Total Invoices 73 | 75 | Total Pending 76 | 78 | Total Paid 79 |
87 |
88 | {`${customer.name}'s 95 |

{customer.name}

96 |
97 | 		99 | {customer.email} 100 | 102 | {customer.total_invoices} 103 | 105 | {customer.total_pending} 106 | 108 | {customer.total_paid} 109 |
114 |
115 | 116 | 117 | 118 | 119 | ); 120 | } 121 | -------------------------------------------------------------------------------- /app/ui/dashboard/cards.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BanknotesIcon, 3 | ClockIcon, 4 | UserGroupIcon, 5 | InboxIcon, 6 | } from '@heroicons/react/24/outline'; 7 | import { lusitana } from '@/app/ui/fonts'; 8 | import { fetchCardData } from '@/app/lib/data'; 9 | 10 | const iconMap = { 11 | collected: BanknotesIcon, 12 | customers: UserGroupIcon, 13 | pending: ClockIcon, 14 | invoices: InboxIcon, 15 | }; 16 | 17 | export default async function CardWrapper() { 18 | const { 19 | totalPaidInvoices, 20 | totalPendingInvoices, 21 | numberOfInvoices, 22 | numberOfCustomers 23 | } = await fetchCardData(); 24 | return ( 25 | <> 26 | {/* NOTE: comment in this code when you get to this point in the course */} 27 | 28 | 29 | 30 | 31 | 36 | 37 | ); 38 | } 39 | 40 | export function Card({ 41 | title, 42 | value, 43 | type, 44 | }: { 45 | title: string; 46 | value: number | string; 47 | type: 'invoices' | 'customers' | 'pending' | 'collected'; 48 | }) { 49 | const Icon = iconMap[type]; 50 | 51 | return ( 52 |
53 |
54 | {Icon ? : null} 55 |

{title}

56 |
57 |

61 | {value} 62 |

63 |
64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /app/ui/dashboard/latest-invoices.tsx: -------------------------------------------------------------------------------- 1 | import { ArrowPathIcon } from '@heroicons/react/24/outline'; 2 | import clsx from 'clsx'; 3 | import Image from 'next/image'; 4 | import { lusitana } from '@/app/ui/fonts'; 5 | import { LatestInvoice } from '@/app/lib/definitions'; 6 | import { fetchLatestInvoices } from '@/app/lib/data'; 7 | 8 | export default async function LatestInvoices() { 9 | const latestInvoices: LatestInvoice[] = await fetchLatestInvoices(); 10 | return ( 11 |
12 |

13 | Latest Invoices 14 |

15 |
16 | {/* NOTE: comment in this code when you get to this point in the course */} 17 | 18 |
19 | {latestInvoices.map((invoice, i) => { 20 | return ( 21 |
30 |
31 | {`${invoice.name}'s 38 |
39 |

40 | {invoice.name} 41 |

42 |

43 | {invoice.email} 44 |

45 |
46 |
47 |

50 | {invoice.amount} 51 |

52 |
53 | ); 54 | })} 55 |
56 |
57 | 58 |

Updated just now

59 |
60 |
61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /app/ui/dashboard/nav-links.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { 4 | UserGroupIcon, 5 | HomeIcon, 6 | DocumentDuplicateIcon, 7 | } from '@heroicons/react/24/outline'; 8 | import Link from 'next/link'; 9 | import { usePathname } from 'next/navigation'; 10 | 11 | // Map of links to display in the side navigation. 12 | // Depending on the size of the application, this would be stored in a database. 13 | const links = [ 14 | { name: 'Home', href: '/dashboard', icon: HomeIcon }, 15 | { 16 | name: 'Invoices', 17 | href: '/dashboard/invoices', 18 | icon: DocumentDuplicateIcon, 19 | }, 20 | { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon }, 21 | ]; 22 | 23 | export default function NavLinks() { 24 | const pathname = usePathname(); 25 | return ( 26 | <> 27 | {links.map((link) => { 28 | const LinkIcon = link.icon; 29 | return ( 30 | 37 | 38 |

{link.name}

39 | 40 | ); 41 | })} 42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /app/ui/dashboard/revenue-chart.tsx: -------------------------------------------------------------------------------- 1 | import { generateYAxis } from '@/app/lib/utils'; 2 | import { CalendarIcon } from '@heroicons/react/24/outline'; 3 | import { lusitana } from '@/app/ui/fonts'; 4 | import { Revenue } from '@/app/lib/definitions'; 5 | import { fetchRevenue } from '@/app/lib/data'; 6 | 7 | // This component is representational only. 8 | // For data visualization UI, check out: 9 | // https://www.tremor.so/ 10 | // https://www.chartjs.org/ 11 | // https://airbnb.io/visx/ 12 | 13 | export default async function RevenueChart() { 14 | const chartHeight = 350; 15 | // NOTE: comment in this code when you get to this point in the course 16 | const revenue: Revenue[] = await fetchRevenue(); 17 | 18 | const { yAxisLabels, topLabel } = generateYAxis(revenue); 19 | 20 | if (!revenue || revenue.length === 0) { 21 | return

No data available.

; 22 | } 23 | 24 | return ( 25 |
26 |

27 | Recent Revenue 28 |

29 | {/* NOTE: comment in this code when you get to this point in the course */} 30 | 31 |
32 |
33 |
37 | {yAxisLabels.map((label) => ( 38 |

{label}

39 | ))} 40 |
41 | 42 | {revenue.map((month) => ( 43 |
44 |
50 |

51 | {month.month} 52 |

53 |
54 | ))} 55 |
56 |
57 | 58 |

Last 12 months

59 |
60 |
61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /app/ui/dashboard/sidenav.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import NavLinks from '@/app/ui/dashboard/nav-links'; 3 | import AcmeLogo from '@/app/ui/acme-logo'; 4 | import { PowerIcon } from '@heroicons/react/24/outline'; 5 | import { signOut } from '@/auth'; 6 | 7 | export default function SideNav() { 8 | return ( 9 |
10 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | { 22 | 'use server'; 23 | await signOut(); 24 | }}> 25 | 29 | 30 |
31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /app/ui/fonts.ts: -------------------------------------------------------------------------------- 1 | import { Inter, Lusitana } from 'next/font/google'; 2 | 3 | export const inter = Inter({ subsets: ['latin'] }); 4 | 5 | export const lusitana = Lusitana({ 6 | weight: ['400', '700'], 7 | subsets: ['latin'] 8 | }) -------------------------------------------------------------------------------- /app/ui/global.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | input[type='number'] { 6 | -moz-appearance: textfield; 7 | appearance: textfield; 8 | } 9 | 10 | input[type='number']::-webkit-inner-spin-button { 11 | -webkit-appearance: none; 12 | margin: 0; 13 | } 14 | 15 | input[type='number']::-webkit-outer-spin-button { 16 | -webkit-appearance: none; 17 | margin: 0; 18 | } 19 | -------------------------------------------------------------------------------- /app/ui/home.module.css: -------------------------------------------------------------------------------- 1 | .shape { 2 | height: 0; 3 | width: 0; 4 | border-bottom: 30px solid black; 5 | border-left: 20px solid transparent; 6 | border-right: 20px solid transparent; 7 | } -------------------------------------------------------------------------------- /app/ui/invoices/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | import { clsx } from 'clsx'; 2 | import Link from 'next/link'; 3 | import { lusitana } from '@/app/ui/fonts'; 4 | 5 | interface Breadcrumb { 6 | label: string; 7 | href: string; 8 | active?: boolean; 9 | } 10 | 11 | export default function Breadcrumbs({ 12 | breadcrumbs, 13 | }: { 14 | breadcrumbs: Breadcrumb[]; 15 | }) { 16 | return ( 17 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /app/ui/invoices/buttons.tsx: -------------------------------------------------------------------------------- 1 | import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline'; 2 | import Link from 'next/link'; 3 | import { deleteInvoice } from '@/app/lib/actions'; 4 | 5 | export function CreateInvoice() { 6 | return ( 7 | 11 | Create Invoice{' '} 12 | 13 | 14 | ); 15 | } 16 | 17 | export function UpdateInvoice({ id }: { id: string }) { 18 | return ( 19 | 23 | 24 | 25 | ); 26 | } 27 | 28 | export function DeleteInvoice({ id }: { id: string }) { 29 | 30 | const deleteInvoiceWithId = deleteInvoice.bind(null, id); 31 | 32 | return ( 33 |
34 | 38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /app/ui/invoices/create-form.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { CustomerField } from '@/app/lib/definitions'; 4 | import Link from 'next/link'; 5 | import { 6 | CheckIcon, 7 | ClockIcon, 8 | CurrencyDollarIcon, 9 | UserCircleIcon, 10 | } from '@heroicons/react/24/outline'; 11 | import { Button } from '@/app/ui/button'; 12 | import { createInvoice } from '@/app/lib/actions'; 13 | import { useFormState } from 'react-dom'; 14 | 15 | export default function Form({ customers }: { customers: CustomerField[] }) { 16 | 17 | const initialState = { message: null, errors: {} }; 18 | const [state, dispatch] = useFormState(createInvoice, initialState); 19 | 20 | return ( 21 |
22 |
23 | {/* Customer Name */} 24 |
25 | 28 |
29 | 45 | 46 |
47 | {state.errors?.customerId ? ( 48 |
53 | {state.errors.customerId.map((error: string) => ( 54 |

{error}

55 | ))} 56 |
57 | ) : null} 58 |
59 | 60 | {/* Invoice Amount */} 61 |
62 | 65 |
66 |
67 | 76 | 77 |
78 |
79 | {state.errors?.amount ? ( 80 |
85 | {state.errors.amount.map((error: string) => ( 86 |

{error}

87 | ))} 88 |
89 | ) : null} 90 |
91 | 92 | {/* Invoice Status */} 93 |
94 | 95 | Set the invoice status 96 | 97 |
98 |
99 |
100 | 108 | 114 |
115 |
116 | 124 | 130 |
131 |
132 |
133 |
134 | {state.errors?.status ? ( 135 |
140 | {state.errors.status.map((error: string) => ( 141 |

{error}

142 | ))} 143 |
144 | ) : null} 145 | {state.message ? ( 146 |
151 |

{state.message}

152 |
153 | ) : null} 154 |
155 |
156 | 160 | Cancel 161 | 162 | 163 |
164 |
165 | ); 166 | } 167 | -------------------------------------------------------------------------------- /app/ui/invoices/edit-form.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { CustomerField, InvoiceForm } from '@/app/lib/definitions'; 4 | import { 5 | CheckIcon, 6 | ClockIcon, 7 | CurrencyDollarIcon, 8 | UserCircleIcon, 9 | } from '@heroicons/react/24/outline'; 10 | import Link from 'next/link'; 11 | import { Button } from '@/app/ui/button'; 12 | import { updateInvoice } from '@/app/lib/actions'; 13 | import { useFormState } from 'react-dom'; 14 | 15 | export default function EditInvoiceForm({ 16 | invoice, 17 | customers, 18 | }: { 19 | invoice: InvoiceForm; 20 | customers: CustomerField[]; 21 | }) { 22 | // this not necessary, and invoice.id is the argument need 23 | const initialState = { message: null, errors: {} }; 24 | const updateInvoiceWithId = updateInvoice.bind(null, invoice.id); 25 | const [state, dispatch] = useFormState(updateInvoiceWithId, initialState) 26 | 27 | return ( 28 |
29 |
30 | {/* Customer Name */} 31 |
32 | 35 |
36 | 52 | 53 |
54 | {state.errors?.customerId ? ( 55 |
60 | {state.errors.customerId.map((error: string) => ( 61 |

{error}

62 | ))} 63 |
64 | ) : null} 65 |
66 | 67 | {/* Invoice Amount */} 68 |
69 | 72 |
73 |
74 | 83 | 84 |
85 |
86 | {state.errors?.amount ? ( 87 |
92 | {state.errors.amount.map((error: string) => ( 93 |

{error}

94 | ))} 95 |
96 | ) : null} 97 |
98 | 99 | {/* Invoice Status */} 100 |
101 | 102 | Set the invoice status 103 | 104 |
105 |
106 |
107 | 116 | 122 |
123 |
124 | 132 | 138 |
139 |
140 |
141 |
142 | {state.errors?.status ? ( 143 |
148 | {state.errors.status.map((error: string) => ( 149 |

{error}

150 | ))} 151 |
152 | ) : null} 153 | {state.message ? ( 154 |
159 |

{state.message}

160 |
161 | ) : null} 162 |
163 |
164 | 168 | Cancel 169 | 170 | 171 |
172 |
173 | ); 174 | } 175 | -------------------------------------------------------------------------------- /app/ui/invoices/pagination.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; 4 | import clsx from 'clsx'; 5 | import Link from 'next/link'; 6 | import { generatePagination } from '@/app/lib/utils'; 7 | import { usePathname, useSearchParams } from 'next/navigation'; 8 | 9 | export default function Pagination({ totalPages }: { totalPages: number }) { 10 | // NOTE: comment in this code when you get to this point in the course 11 | const pathname = usePathname(); 12 | const searchParams = useSearchParams(); 13 | const currentPage = Number(searchParams.get('page')) || 1; 14 | 15 | const createPageURL = (pageNumber: number | string) => { 16 | const params = new URLSearchParams(searchParams); 17 | params.set('page', pageNumber.toString()); 18 | return `${pathname}?${params.toString()}`; 19 | }; 20 | 21 | const allPages = generatePagination(currentPage, totalPages); 22 | 23 | return ( 24 | <> 25 | {/* NOTE: comment in this code when you get to this point in the course */} 26 | 27 |
28 | 33 | 34 |
35 | {allPages.map((page, index) => { 36 | let position: 'first' | 'last' | 'single' | 'middle' | undefined; 37 | 38 | if (index === 0) position = 'first'; 39 | if (index === allPages.length - 1) position = 'last'; 40 | if (allPages.length === 1) position = 'single'; 41 | if (page === '...') position = 'middle'; 42 | 43 | return ( 44 | 51 | ); 52 | })} 53 |
54 | 55 | = totalPages} 59 | /> 60 |
61 | 62 | ); 63 | } 64 | 65 | function PaginationNumber({ 66 | page, 67 | href, 68 | isActive, 69 | position, 70 | }: { 71 | page: number | string; 72 | href: string; 73 | position?: 'first' | 'last' | 'middle' | 'single'; 74 | isActive: boolean; 75 | }) { 76 | const className = clsx( 77 | 'flex h-10 w-10 items-center justify-center text-sm border', 78 | { 79 | 'rounded-l-md': position === 'first' || position === 'single', 80 | 'rounded-r-md': position === 'last' || position === 'single', 81 | 'z-10 bg-blue-600 border-blue-600 text-white': isActive, 82 | 'hover:bg-gray-100': !isActive && position !== 'middle', 83 | 'text-gray-300': position === 'middle', 84 | }, 85 | ); 86 | 87 | return isActive || position === 'middle' ? ( 88 |
{page}
89 | ) : ( 90 | 91 | {page} 92 | 93 | ); 94 | } 95 | 96 | function PaginationArrow({ 97 | href, 98 | direction, 99 | isDisabled, 100 | }: { 101 | href: string; 102 | direction: 'left' | 'right'; 103 | isDisabled?: boolean; 104 | }) { 105 | const className = clsx( 106 | 'flex h-10 w-10 items-center justify-center rounded-md border', 107 | { 108 | 'pointer-events-none text-gray-300': isDisabled, 109 | 'hover:bg-gray-100': !isDisabled, 110 | 'mr-2 md:mr-4': direction === 'left', 111 | 'ml-2 md:ml-4': direction === 'right', 112 | }, 113 | ); 114 | 115 | const icon = 116 | direction === 'left' ? ( 117 | 118 | ) : ( 119 | 120 | ); 121 | 122 | return isDisabled ? ( 123 |
{icon}
124 | ) : ( 125 | 126 | {icon} 127 | 128 | ); 129 | } 130 | -------------------------------------------------------------------------------- /app/ui/invoices/status.tsx: -------------------------------------------------------------------------------- 1 | import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline'; 2 | import clsx from 'clsx'; 3 | 4 | export default function InvoiceStatus({ status }: { status: string }) { 5 | return ( 6 | 15 | {status === 'pending' ? ( 16 | <> 17 | Pending 18 | 19 | 20 | ) : null} 21 | {status === 'paid' ? ( 22 | <> 23 | Paid 24 | 25 | 26 | ) : null} 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /app/ui/invoices/table.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons'; 3 | import InvoiceStatus from '@/app/ui/invoices/status'; 4 | import { formatDateToLocal, formatCurrency } from '@/app/lib/utils'; 5 | import { fetchFilteredInvoices } from '@/app/lib/data'; 6 | 7 | export default async function InvoicesTable({ 8 | query, 9 | currentPage, 10 | }: { 11 | query: string; 12 | currentPage: number; 13 | }) { 14 | const invoices = await fetchFilteredInvoices(query, currentPage); 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 | {invoices?.map((invoice) => ( 22 |
26 |
27 |
28 |
29 | {`${invoice.name}'s 36 |

{invoice.name}

37 |
38 |

{invoice.email}

39 |
40 | 41 |
42 |
43 |
44 |

45 | {formatCurrency(invoice.amount)} 46 |

47 |

{formatDateToLocal(invoice.date)}

48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | ))} 56 |
57 | 58 | 59 | 60 | 63 | 66 | 69 | 72 | 75 | 78 | 79 | 80 | 81 | {invoices?.map((invoice) => ( 82 | 86 | 98 | 101 | 104 | 107 | 110 | 116 | 117 | ))} 118 | 119 |
61 | Customer 62 | 64 | Email 65 | 67 | Amount 68 | 70 | Date 71 | 73 | Status 74 | 76 | Edit 77 |
87 |
88 | {`${invoice.name}'s 95 |

{invoice.name}

96 |
97 | 		99 | {invoice.email} 100 | 102 | {formatCurrency(invoice.amount)} 103 | 105 | {formatDateToLocal(invoice.date)} 106 | 108 | 109 | 111 |
112 | 113 | 114 |
115 |
120 |
121 |
122 |
123 | ); 124 | } 125 | -------------------------------------------------------------------------------- /app/ui/login-form.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { lusitana } from '@/app/ui/fonts'; 4 | import { 5 | AtSymbolIcon, 6 | KeyIcon, 7 | ExclamationCircleIcon, 8 | } from '@heroicons/react/24/outline'; 9 | import { ArrowRightIcon } from '@heroicons/react/20/solid'; 10 | import { Button } from './button'; 11 | import { useFormState, useFormStatus } from 'react-dom'; 12 | import { authenticate } from '@/app/lib/actions'; 13 | 14 | export default function LoginForm() { 15 | const [code, action] = useFormState(authenticate, undefined); 16 | return ( 17 |
18 |
19 |

20 | Please log in to continue. 21 |

22 |
23 |
24 | 30 |
31 | 39 | 40 |
41 |
42 |
43 | 49 |
50 | 59 | 60 |
61 |
62 |
63 | 64 |
65 | {code === 'CredentialSignin' && ( 66 | <> 67 | 68 |

69 | Invalid credentials 70 |

71 | 72 | )} 73 |
74 |
75 |
76 | ); 77 | } 78 | 79 | function LoginButton() { 80 | const { pending } = useFormStatus(); 81 | 82 | return ( 83 | 86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /app/ui/search.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; 4 | import { useSearchParams, usePathname, useRouter } from 'next/navigation'; 5 | import { useDebouncedCallback } from 'use-debounce'; 6 | 7 | export default function Search({ placeholder }: { placeholder: string }) { 8 | const searchParams = useSearchParams(); 9 | const pathname = usePathname(); 10 | const { replace } = useRouter(); 11 | 12 | const handleSearch = useDebouncedCallback((e: React.ChangeEvent)=>{ 13 | const params = new URLSearchParams(searchParams) 14 | const term: string = e.target.value 15 | params.set('page', '1'); 16 | if (term) { 17 | params.set('query', term); 18 | } else { 19 | params.delete('query'); 20 | } 21 | replace(`${pathname}?${params.toString()}`); 22 | }, 300) 23 | 24 | return ( 25 |
26 | 29 | 35 | 36 |
37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /app/ui/skeletons.tsx: -------------------------------------------------------------------------------- 1 | // Loading animation 2 | const shimmer = 3 | 'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent'; 4 | 5 | export function CardSkeleton() { 6 | return ( 7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ); 19 | } 20 | 21 | export function CardsSkeleton() { 22 | return ( 23 | <> 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export function RevenueChartSkeleton() { 33 | return ( 34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ); 45 | } 46 | 47 | export function InvoiceSkeleton() { 48 | return ( 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | ); 60 | } 61 | 62 | export function LatestInvoicesSkeleton() { 63 | return ( 64 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | ); 83 | } 84 | 85 | export default function DashboardSkeleton() { 86 | return ( 87 | <> 88 |
91 |
92 | 93 | 94 | 95 | 96 |
97 |
98 | 99 | 100 |
101 | 102 | ); 103 | } 104 | 105 | export function TableRowSkeleton() { 106 | return ( 107 | 108 | {/* Customer Name and Image */} 109 | 110 |
111 |
112 |
113 |
114 | 115 | {/* Email */} 116 | 117 |
118 | 119 | {/* Amount */} 120 | 121 |
122 | 123 | {/* Date */} 124 | 125 |
126 | 127 | {/* Status */} 128 | 129 |
130 | 131 | {/* Actions */} 132 | 133 |
134 |
135 |
136 |
137 | 138 | 139 | ); 140 | } 141 | 142 | export function InvoicesMobileSkeleton() { 143 | return ( 144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 | ); 164 | } 165 | 166 | export function InvoicesTableSkeleton() { 167 | return ( 168 |
169 |
170 |
171 |
172 | 173 | 174 | 175 | 176 | 177 | 178 |
179 | 180 | 181 | 182 | 185 | 188 | 191 | 194 | 197 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 |
183 | Customer 184 | 186 | Email 187 | 189 | Amount 190 | 192 | Date 193 | 195 | Status 196 | 201 | Edit 202 |
214 |
215 |
216 |
217 | ); 218 | } 219 | -------------------------------------------------------------------------------- /auth.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextAuthConfig } from 'next-auth'; 2 | 3 | export const authConfig = { 4 | providers: [], 5 | pages: { 6 | signIn: '/login', 7 | }, 8 | callbacks: { 9 | authorized({ auth, request: { nextUrl } }) { 10 | const isLoggedIn = !!auth?.user; 11 | const isOnDashboard = nextUrl.pathname.startsWith('/dashboard'); 12 | if (isOnDashboard) { 13 | if (isLoggedIn) return true; 14 | return false; // Redirect unauthenticated users to login page 15 | } else if (isLoggedIn) { 16 | return Response.redirect(new URL('/dashboard', nextUrl)); 17 | } 18 | return true; 19 | }, 20 | }, 21 | } satisfies NextAuthConfig; 22 | -------------------------------------------------------------------------------- /auth.ts: -------------------------------------------------------------------------------- 1 | import NextAuth from 'next-auth'; 2 | import Credentials from 'next-auth/providers/credentials'; 3 | import { authConfig } from './auth.config'; 4 | import { sql } from '@vercel/postgres'; 5 | import { z } from 'zod'; 6 | import type { User } from '@/app/lib/definitions'; 7 | import bcrypt from 'bcrypt'; 8 | 9 | async function getUser(email: string): Promise { 10 | try { 11 | const user = await sql`SELECT * from USERS where email=${email}`; 12 | return user.rows[0]; 13 | } catch (error) { 14 | console.error('Failed to fetch user:', error); 15 | throw new Error('Failed to fetch user.'); 16 | } 17 | } 18 | 19 | export const { auth, signIn, signOut } = NextAuth({ 20 | ...authConfig, 21 | providers: [ 22 | Credentials({ 23 | async authorize(credentials) { 24 | const parsedCredentials = z 25 | .object({ email: z.string().email(), password: z.string().min(6) }) 26 | .safeParse(credentials); 27 | 28 | if (parsedCredentials.success) { 29 | const { email, password } = parsedCredentials.data; 30 | const user = await getUser(email); 31 | if (!user) return null; 32 | const passwordsMatch = await bcrypt.compare(password, user.password); 33 | 34 | if (passwordsMatch) return user; 35 | } 36 | 37 | console.log('Invalid credentials'); 38 | return null; 39 | } 40 | }), 41 | ], 42 | }); -------------------------------------------------------------------------------- /middleware.ts: -------------------------------------------------------------------------------- 1 | import NextAuth from 'next-auth'; 2 | import { authConfig } from './auth.config'; 3 | 4 | export default NextAuth(authConfig).auth; 5 | 6 | export const config = { 7 | // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher 8 | matcher: ['/((?!api|_next/static|_next/image|customers|.png).*)'], 9 | }; 10 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "next build", 5 | "dev": "next dev", 6 | "start": "next start", 7 | "seed": "node -r dotenv/config ./scripts/seed.js", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "@heroicons/react": "^2.0.18", 12 | "@tailwindcss/forms": "^0.5.6", 13 | "@types/node": "20.5.7", 14 | "@vercel/postgres": "^0.5.1", 15 | "autoprefixer": "10.4.15", 16 | "bcrypt": "^5.1.1", 17 | "clsx": "^2.0.0", 18 | "next": "^14.0.0", 19 | "next-auth": "^5.0.0-beta.3", 20 | "postcss": "8.4.31", 21 | "react": "18.2.0", 22 | "react-dom": "18.2.0", 23 | "tailwindcss": "3.3.3", 24 | "typescript": "5.2.2", 25 | "use-debounce": "^10.0.0", 26 | "zod": "^3.22.2" 27 | }, 28 | "devDependencies": { 29 | "@types/bcrypt": "^5.0.1", 30 | "@types/react": "18.2.21", 31 | "@types/react-dom": "18.2.14", 32 | "dotenv": "^16.3.1", 33 | "eslint": "^8.52.0", 34 | "eslint-config-next": "^14.0.0", 35 | "prettier": "^3.0.3" 36 | }, 37 | "engines": { 38 | "node": ">=18" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/customers/amy-burns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/amy-burns.png -------------------------------------------------------------------------------- /public/customers/balazs-orban.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/balazs-orban.png -------------------------------------------------------------------------------- /public/customers/delba-de-oliveira.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/delba-de-oliveira.png -------------------------------------------------------------------------------- /public/customers/emil-kowalski.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/emil-kowalski.png -------------------------------------------------------------------------------- /public/customers/evil-rabbit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/evil-rabbit.png -------------------------------------------------------------------------------- /public/customers/guillermo-rauch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/guillermo-rauch.png -------------------------------------------------------------------------------- /public/customers/hector-simpson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/hector-simpson.png -------------------------------------------------------------------------------- /public/customers/jared-palmer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/jared-palmer.png -------------------------------------------------------------------------------- /public/customers/lee-robinson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/lee-robinson.png -------------------------------------------------------------------------------- /public/customers/michael-novotny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/michael-novotny.png -------------------------------------------------------------------------------- /public/customers/steph-dietz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/steph-dietz.png -------------------------------------------------------------------------------- /public/customers/steven-tey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/customers/steven-tey.png -------------------------------------------------------------------------------- /public/hero-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/hero-desktop.png -------------------------------------------------------------------------------- /public/hero-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lllariogonzalez/nextjs-dashboard/53c833878d412d1316ed2058710785b2d02a60e3/public/hero-mobile.png -------------------------------------------------------------------------------- /scripts/seed.js: -------------------------------------------------------------------------------- 1 | const { db } = require('@vercel/postgres'); 2 | const { 3 | invoices, 4 | customers, 5 | revenue, 6 | users, 7 | } = require('../app/lib/placeholder-data.js'); 8 | const bcrypt = require('bcrypt'); 9 | 10 | async function seedUsers(client) { 11 | try { 12 | await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; 13 | // Create the "invoices" table if it doesn't exist 14 | const createTable = await client.sql` 15 | CREATE TABLE IF NOT EXISTS users ( 16 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, 17 | name VARCHAR(255) NOT NULL, 18 | email TEXT NOT NULL UNIQUE, 19 | password TEXT NOT NULL 20 | ); 21 | `; 22 | 23 | console.log(`Created "users" table`); 24 | 25 | // Insert data into the "users" table 26 | const insertedUsers = await Promise.all( 27 | users.map(async (user) => { 28 | const hashedPassword = await bcrypt.hash(user.password, 10); 29 | return client.sql` 30 | INSERT INTO users (id, name, email, password) 31 | VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword}) 32 | ON CONFLICT (id) DO NOTHING; 33 | `; 34 | }), 35 | ); 36 | 37 | console.log(`Seeded ${insertedUsers.length} users`); 38 | 39 | return { 40 | createTable, 41 | users: insertedUsers, 42 | }; 43 | } catch (error) { 44 | console.error('Error seeding users:', error); 45 | throw error; 46 | } 47 | } 48 | 49 | async function seedInvoices(client) { 50 | try { 51 | await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; 52 | 53 | // Create the "invoices" table if it doesn't exist 54 | const createTable = await client.sql` 55 | CREATE TABLE IF NOT EXISTS invoices ( 56 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, 57 | customer_id UUID NOT NULL, 58 | amount INT NOT NULL, 59 | status VARCHAR(255) NOT NULL, 60 | date DATE NOT NULL 61 | ); 62 | `; 63 | 64 | console.log(`Created "invoices" table`); 65 | 66 | // Insert data into the "invoices" table 67 | const insertedInvoices = await Promise.all( 68 | invoices.map( 69 | (invoice) => client.sql` 70 | INSERT INTO invoices (customer_id, amount, status, date) 71 | VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date}) 72 | ON CONFLICT (id) DO NOTHING; 73 | `, 74 | ), 75 | ); 76 | 77 | console.log(`Seeded ${insertedInvoices.length} invoices`); 78 | 79 | return { 80 | createTable, 81 | invoices: insertedInvoices, 82 | }; 83 | } catch (error) { 84 | console.error('Error seeding invoices:', error); 85 | throw error; 86 | } 87 | } 88 | 89 | async function seedCustomers(client) { 90 | try { 91 | await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`; 92 | 93 | // Create the "customers" table if it doesn't exist 94 | const createTable = await client.sql` 95 | CREATE TABLE IF NOT EXISTS customers ( 96 | id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, 97 | name VARCHAR(255) NOT NULL, 98 | email VARCHAR(255) NOT NULL, 99 | image_url VARCHAR(255) NOT NULL 100 | ); 101 | `; 102 | 103 | console.log(`Created "customers" table`); 104 | 105 | // Insert data into the "customers" table 106 | const insertedCustomers = await Promise.all( 107 | customers.map( 108 | (customer) => client.sql` 109 | INSERT INTO customers (id, name, email, image_url) 110 | VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url}) 111 | ON CONFLICT (id) DO NOTHING; 112 | `, 113 | ), 114 | ); 115 | 116 | console.log(`Seeded ${insertedCustomers.length} customers`); 117 | 118 | return { 119 | createTable, 120 | customers: insertedCustomers, 121 | }; 122 | } catch (error) { 123 | console.error('Error seeding customers:', error); 124 | throw error; 125 | } 126 | } 127 | 128 | async function seedRevenue(client) { 129 | try { 130 | // Create the "revenue" table if it doesn't exist 131 | const createTable = await client.sql` 132 | CREATE TABLE IF NOT EXISTS revenue ( 133 | month VARCHAR(4) NOT NULL UNIQUE, 134 | revenue INT NOT NULL 135 | ); 136 | `; 137 | 138 | console.log(`Created "revenue" table`); 139 | 140 | // Insert data into the "revenue" table 141 | const insertedRevenue = await Promise.all( 142 | revenue.map( 143 | (rev) => client.sql` 144 | INSERT INTO revenue (month, revenue) 145 | VALUES (${rev.month}, ${rev.revenue}) 146 | ON CONFLICT (month) DO NOTHING; 147 | `, 148 | ), 149 | ); 150 | 151 | console.log(`Seeded ${insertedRevenue.length} revenue`); 152 | 153 | return { 154 | createTable, 155 | revenue: insertedRevenue, 156 | }; 157 | } catch (error) { 158 | console.error('Error seeding revenue:', error); 159 | throw error; 160 | } 161 | } 162 | 163 | async function main() { 164 | const client = await db.connect(); 165 | 166 | await seedUsers(client); 167 | await seedCustomers(client); 168 | await seedInvoices(client); 169 | await seedRevenue(client); 170 | 171 | await client.end(); 172 | } 173 | 174 | main().catch((err) => { 175 | console.error( 176 | 'An error occurred while attempting to seed the database:', 177 | err, 178 | ); 179 | }); 180 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss'; 2 | 3 | const config: Config = { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | gridTemplateColumns: { 12 | '13': 'repeat(13, minmax(0, 1fr))', 13 | }, 14 | colors: { 15 | blue: { 16 | 400: '#2589FE', 17 | 500: '#0070F3', 18 | 600: '#2F6FEB', 19 | }, 20 | }, 21 | }, 22 | keyframes: { 23 | shimmer: { 24 | '100%': { 25 | transform: 'translateX(100%)', 26 | }, 27 | }, 28 | }, 29 | }, 30 | 31 | plugins: [require('@tailwindcss/forms')], 32 | }; 33 | export default config; 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": [ 26 | "next-env.d.ts", 27 | "**/*.ts", 28 | "**/*.tsx", 29 | ".next/types/**/*.ts", 30 | "app/lib/placeholder-data.js", 31 | "scripts/seed.js" 32 | ], 33 | "exclude": ["node_modules"] 34 | } 35 | --------------------------------------------------------------------------------