**INTRODUCTION** Over the past two weeks, I worked on developing a financial dashboard application using Next.js. **TABLE OF CONTENTS** 1. What to be Developed 2. Overview of Application 3. System Requirements 4. Getting Started **WHAT TO BE DEVELOPED** - A financial dashboard home page. - A login page. - Financial dashboard layout. **OVERVIEW OF APPLICATION** In the development of the financial dashboard application, there are some features that are going to be implemented like: - Styling: The different ways to style your application in Next.js. - Optimizations: How to optimize images, links, and fonts. Routing: How to create nested layouts and pages using file-system routing. - Data Fetching: How to set up a database on Vercel, and best practices for fetching and streaming. **SYSTEM REQUIREMENTS** This involves the system requirements: - Node.js 18.17.0 or later [Download Node.js](https://nodejs.org/en/download/prebuilt-installer/current) - Operating systems: macOS, Windows (including WSL), or Linux. - Visual Code editor.[Download VisualStudio Code](https://code.visualstudio.com/download) **GETTING STARTED** **_Creating The Financial Dashboard Application:_** You need to install the [pnpm](https://pnpm.io/) as your package manager, and if you don't have pnpm install in your operating system, install by running this command on terminal: ``` npm install -g pnpm ``` Then to create a Next.js financial dashboard app, open your terminal, navigate to directory you want your app folder to be and then run the following command in the terminal: ``` npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm ``` **_Folder Structure:_** You'll notice that the project has the following folder structure: - /app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from. - /app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions. - /app/ui: Contains all the UI components for your application, such as cards, tables, and forms. - /public: Contains all the static assets for your application, such as images. - 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. **_Running The Development Server:_** Run pnpm i on your terminal to install the project's packages. ``` pnpm i ``` Followed by pnpm dev to start the development server. ``` pnpm dev ``` pnpm dev starts your Next.js development server. Check to see if it's working. Open [http://localhost:3000](http://localhost:3000/) on your browser. **CREATING A FINANCIAL DASHBOARD HOME PAGE** The home page will created by adding the images and fonts. To add the images, use the **next/image** component to automatically optimize your images. _**Adding The Desktop Hero Image;**_ In your **/app/page.tsx** file, import the component from next/image. Then, add the image by using the following statements below: ``` import AcmeLogo from '@/app/ui/acme-logo'; import { ArrowRightIcon } from '@heroicons/react/24/outline'; import Link from 'next/link'; import { lusitana } from '@/app/ui/fonts'; import Image from 'next/image'; export default function Page() { return ( // ...

{/* Add Hero Images Here */} Screenshots of the dashboard project showing desktop version

//... ); } ``` _**Adding The Mobile Hero Image;**_ To add the Mobile Hero Image, in the same **/app/page.tsx** add the following statements below the Desktop Hero Image statements. ``` {/* Add Hero Images Here */} Screenshots of the dashboard project showing desktop version

Screenshot of the dashboard project showing mobile version

``` Now let's add some fonts to that home page. 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. ``` import { Inter } from 'next/font/google'; export const inter = Inter({ subsets: ['latin'] }); ``` Finally, add the font to the element in **/app/layout.tsx**: ``` import '@/app/ui/global.css'; import { inter } from '@/app/ui/fonts'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` So now the financial dashboard application home page will look like this below: ![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzx08r8se2usvht33fiw.png) **CREATING A LOGIN PAGE** Start by creating a new route called /login and paste the following code in your **/app/login/page.tsx**: ``` import AcmeLogo from '@/app/ui/acme-logo'; import LoginForm from '@/app/ui/login-form'; export default function LoginPage() { return (

); } ``` You'll notice the page imports ****. We will be using the NextAuth.js to add authentication to our application. **NextAuth.js** abstracts away much of the complexity involved in managing sessions, **sign-in** and **sign-out**, and other aspects of authentication. _**Setting Up NextAuth.js;**_ Install NextAuth.js by running the following command in your terminal: ``` pnpm i next-auth@beta ``` Here, you're installing the beta version of NextAuth.js, which is compatible with Next.js 14. 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: ``` openssl rand -base64 32 ``` Then, in your .env file, add your generated key to the AUTH_SECRET variable: ``` AUTH_SECRET=your-secret-key ``` _**Adding The Page Options;**_ 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: ``` import type { NextAuthConfig } from 'next-auth'; export const authConfig = { pages: { signIn: '/login', }, } satisfies NextAuthConfig; ``` You can use the pages option to specify the route for custom **sign-in**, **sign-out**, and error pages. This is not required, but 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. _**Protecting Your Routes With Next.js Middleware;**_ Next, add the logic to protect your routes. This will prevent users from accessing the dashboard pages unless they are logged in. ``` import type { NextAuthConfig } from 'next-auth'; export const authConfig = { pages: { signIn: '/login', }, callbacks: { authorized({ auth, request: { nextUrl } }) { const isLoggedIn = !!auth?.user; const isOnDashboard = nextUrl.pathname.startsWith('/dashboard'); if (isOnDashboard) { if (isLoggedIn) return true; return false; // Redirect unauthenticated users to login page } else if (isLoggedIn) { return Response.redirect(new URL('/dashboard', nextUrl)); } return true; }, }, providers: [], // Add providers with an empty array for now } satisfies NextAuthConfig; ``` 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. 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: ``` import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; export default NextAuth(authConfig).auth; export const config = { // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'], }; ``` 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. Then create a new file called **auth.ts** that spreads your authConfig object: ``` import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; export const { auth, signIn, signOut } = NextAuth({ ...authConfig, }); ``` _**Adding The Credentials Providers;**_ 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. The Credentials provider allows users to log in with a username and a password. In your **/auth.ts** add the following code: ``` import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; import Credentials from 'next-auth/providers/credentials'; export const { auth, signIn, signOut } = NextAuth({ ...authConfig, providers: [Credentials({})], }); ``` _**Adding The Sign In Functionality;**_ 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: ``` import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; import Credentials from 'next-auth/providers/credentials'; import { z } from 'zod'; export const { auth, signIn, signOut } = NextAuth({ ...authConfig, providers: [ Credentials({ async authorize(credentials) { const parsedCredentials = z .object({ email: z.string().email(), password: z.string().min(6) }) .safeParse(credentials); }, }), ], }); ``` After validating the credentials, create a new getUser function that queries the user from the database. ``` import { sql } from '@vercel/postgres'; import type { User } from '@/app/lib/definitions'; import bcrypt from 'bcrypt'; async function getUser(email: string): Promise { try { const user = await sql`SELECT * FROM users WHERE email=${email}`; return user.rows[0]; } catch (error) { console.error('Failed to fetch user:', error); throw new Error('Failed to fetch user.'); } } if (parsedCredentials.success) { const { email, password } = parsedCredentials.data; const user = await getUser(email); if (!user) return null; ``` _**Updating The Login Form;**_ 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**: ``` 'use server'; import { signIn } from '@/auth'; import { AuthError } from 'next-auth'; // ... export async function authenticate( prevState: string | undefined, formData: FormData, ) { try { await signIn('credentials', formData); } catch (error) { if (error instanceof AuthError) { switch (error.type) { case 'CredentialsSignin': return 'Invalid credentials.'; default: return 'Something went wrong.'; } } throw error; } } ``` Finally, in your login-form.tsx component, you can use React's useActionState to call the server action, handle form errors, and display the form's pending state: ``` import { useActionState } from 'react'; import { authenticate } from '@/app/lib/actions'; const [errorMessage, formAction, isPending] = useActionState( authenticate, undefined, );

{errorMessage && ( <>

{errorMessage}

)} ``` _**Adding Logout Functionality;**_ To add the logout functionality to , call the signOut function from auth.ts in your element: ``` import { signOut } from '@/auth'; action={async () => { 'use server'; await signOut(); }} ``` Now, try it out. You should be able to log in and out of your application. The login page should look like this: ![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1ps90fabgicxqsqze6m.png) **CREATING DASHBOARD LAYOUT** Dashboards 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. inside the **/dashboard** folder, add a new file called **/layout.tsx** and paste the following code: ``` import SideNav from '@/app/ui/dashboard/sidenav'; export default function Layout({ children }: { children: React.ReactNode }) { return (

{children}

); } ``` You'll see the dashboard layout like this below: ![Dashboard Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2i3tjki4wys9eefpt8x.png) Also set up pages for the /customers and /invoices. _Customers Page_: /app/dashboard/customers/page.tsx ``` export default function Page() { return

Customers Page

; } ``` _Invoices Page_: /app/dashboard/invoices/page.tsx ``` export default function Page() { return

Invoices Page

; } ``` _**Navigation Between Pages:**_ In Next.js, you can use the **** Component to link between pages in your application. **** allows you to do client-side navigation with JavaScript. To use the component, open **/app/ui/dashboard/nav-links.tsx**, and import the Link component from next/link. Then, replace the **** tag with ****: ``` import { UserGroupIcon, HomeIcon, DocumentDuplicateIcon, } from '@heroicons/react/24/outline'; **import Link from 'next/link';** // ... export default function NavLinks() { return ( <> {links.map((link) => { const LinkIcon = link.icon; return (

{link.name}

); })} ); } ``` **CREATING THE DATABASE** 1. **_Create A Github Repository;_** To start, let's push your repository to Github if you haven't done so already. This will make it easier to set up your database and deploy. If you need help setting up your repository, take a look at this [guide on Github](https://help.github.com/en/github/getting-started-with-github/create-a-repo). 2. **_Create A Vercel Account;_** Visit [Vercel.com](https://vercel.com/signup) to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts. 3. **_Connect And Deploy Your Project;_** You'll be taken to this screen where you can select and import the GitHub repository you've just created: ![Vercel Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsi1ogdhflgd2iod58ni.png) Name your project and click **Deploy**. 4. **_Create A Postgres Database;_** To set up a database, click Continue to Dashboard and select the Storage tab from your project dashboard. Select Connect Store → Create New → Postgres → Continue. ![Postgress Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vub6t1b0wyqrg5mg1m0g.png)

iambarnabu

DEVELOPING A FINANCIAL DASHBOARD APPLICATION USING NEXT.JS

Join Our Newsletter. No Spam, Only the good stuff.