The ‘Next’ big thing

Photo by Jake Hills on Unsplash

Lets take a moment and admire the beauty of Next and how easy it makes setting up a frontend project in react (special mention to Vite in the end but this post is a guide to make a small dashboard using Next, tailwind and Apex charts). The power of next is also to be able to give control to the developer to make components server side rendered or client side, Next also takes care of components with static data. All in all it gives you power to massively optimize your frontend and also provide some good developer experience too. This blog is not a react tutorial, I assume you are aware of basic react, and this is the “Next” step in your frontend develpoment journey.

I will also be using tailwind CSS for styling the page because .. well its so easy to do so using tailwind, and I am used to it. I shall also be showing how to effectively use custom css modules for components. The goal at end of this blog is for you to have a starting codebase for developing a basic dashboard with all the common graphs and tables and hopefully most of the functionality you expect from a dashboard.

Setting up the project:

To start the project we will use the

npx create-next-app <app-name> 

command and the terminal shall provide us with the options to set the app up. We will be using tailwind , typecript and app routing for our app . App routing is a really cool thing next does where you can create folders in the src app and provide it a page.tsx file and you can route to ```<base-url>/<app-folder-name>``` and you will be able to route to the page.

run the above command in VS code terminal (use sudo if you have to)

choosoe the following options and let Next do its magic

if everythign goes well and you get the success message on your terminal you should have a folder structure something like this for your app

the folder structure in the next app

Now, by default the app has all the server components, as mentioned in the documentation for optimization purposes.

We will create a components folder in the src/ which will contain all our components and the pages will be a subfolder in the app so that we can use the app routing.

This image from the Next documentations explains what and how app routing can be used. (more on this later, if needed)

Now that we have our well structured, git initialized codebase ready(next initialized the git while creating the folder structure), lets start with some development work..

You can

cd <the project folder(for me it’ll be dashboard)>

and then run

npm run dev

to start the development server. The initial app will look something like this:

the initial page

Oh yeah I forgot, you can use Vercel to very easily deploy your app too to show it off in your resume or portfolios

Well then as the page says, let’s begin by editing the app/page.tsx file and clear out all the styles in global.css file (do not delete all the code, we need the tailwind stuff).

We want the global.css to look like this :

global.css

Tailwind makes it really easy to switch to dark mode, just put dark as a calss to the `main` tag and you have dark mode (another reason why I use tailwind so much).

Well we want a clean slate to make ourselves a nice dashboard page and a sidebar component. Very simple, very basic

We need to install just one more thing before we start.. the Apex charts

npm install react-apexcharts apexcharts

use sudo if needed.

If you want to use client side rendering of some component (use useState etc on component) you need to put the

'use client';

directive to tell next that it is a client side rendered component because by default all components will be server side rendered.

So this is where the code stands at this point:

the folder structure

src/app/page.tsx

src/app/components/sidebar.component/sidebar.tsx

Lets go for a simple design of the dashboard to have a header with some logo, app name(Dashboard), and a user image.

Lets start by creating the header component and bringing it into the main page..

This is what the Header’s code looks like :

src/app/components/header.component/header.tsx

I used the reaxt-icons library to get the user icon. Now as I said, this is a very basic header and the only purpose of the blog is to show how to get started with a next js app and have a starting point to build even more awesome dashboard, so I didn’t spend much time on designing.

This is what the page looks now..

the app

sweet simple and crisp right?

We need to make one more change to make out title bar more customized.. we need to change the title in the src/app/layout.tsx file. We need to change the metadata .. this is what the file will look like:

layout.tsx

This will make the title of the page to My Dashboard, like so:

Now that we have our outline ready lets put out sidebar and graphs to the page(now doing it using a library like MUI makes it way easier but in case you want more control use shadcn library, or if you want even more control use the custom component as I am using here, completely depends how fast you want to deliver and what kind of functionality you want).

The dashboard starts taking a littile bit of shape as we progress, the hover functionality is implemented on the items in sidebar to highlight the page we want to click..

something like this.

Lets take a look at the code base and see what we have done

src/app/page.tsx

src/app/components/sidebar.component/sidebar.tsx

src/app/components/sidebar-item.component/sidebar-item.tsx

And with this small amount of code we have successfully created a basic structure for our dashboard app. I will not be implementing the analytics screen, maybe take it as a homework.. the end of this blog has links to documentation of both next and tailwind.

This is what the dashboard finally looks like after the charts being added:

the final dashboard

Not the most beautiful dashboard, I know, but we have a basic dashboard ready now..

Here is the codebase finally

src/app/components/main.component/main.tsx

and a sample of how the charts are being used:

src/app/components/chats/donut.tsx

The ‘use client’ directive on the top of the page is absolutely important, without it Apex is not able to load the chart.

Finally, we are done with the basic of next, tailwind and Apex in typescript and have a basic dashboard ready to style and modify based on our needs..

We can now check out how to easily deploy the app to share with your friends:

1. push your project to github
2. login to vercel using your github
3. vercel will ask what project we want to deploy, choose the one you want to deploy, click import
4. on the next screen check all the fields are correct and click on deploy
5. if all goes well and build doesnt fail, you will be congractulated with the sucess screen.
6. you can click on the preview shown to go to the hosted app
7. copy the url and you can share it to anyone you want..

step1

step 2

step 3

step4

and there you have it.. the deployed app

Hope you had as much fun reading through my journey of creating this dashboard as much fun I had developing it and learning some really cool stuff along the way. See you again with some other cool topic to talk about.. until then, here is the list of documentation links I promised:

Nextjs — https://nextjs.org/docs

Tailwind — https://v2.tailwindcss.com/docs (you can directly search for a particular style you want and it will take you to the documentation forthat class)

Apex Charts(react) — https://apexcharts.com/docs/react-charts/

Apex React Charts Demo — https://apexcharts.com/react-chart-demos/