An easy-to-use next.js administration dashboard implementation

Overview

Next.js Admin

Demo

https://next-admin.ironcladdev.repl.co/

Getting the Code

Open your favorite code editor and run git clone https://github.com/Conner1115/next-admin.git. You won't even have to run npx create-next-app since all the files are already there for you. Simply run npm run dev and then start building your site around that.

Customizing Authentication

Before you start on the admin dashboard go to the .env file. Set a strong password, which is the one you'll be using to log in and out of your dashboard, and a long random string for the session cookie. This enables security and prevents brute-forcing.

You'll need to set two fields in the .env file. ADMIN_SESSION which is the long random string and ADMIN_PASSWORD which is the password you'll use to log in.

Don't worry, I've already applied Rate Limiting on the password 'n all (three failed login attempts per thirty minutes), so no worries on the bad guys getting in your site and messing up all the content.

Customizing the Dashboard

Go to the data folder and then open up data.json. This is where you will control the different types of data that can be edited.

If you went to the admin page in the demo, which is probably corrupted to a massive extent, and played around with it, you can see that the fields consist of single string fields, multiple strings fields, and arrays.

Create a single String Field

Open up data.json, clear out all the existing fields, and add an item "homepage".

{
  "homepage": "This is the text that goes on the homepage"
}

Run npm run dev in the terminal and go to http://localhost:3000/admin. You should be seeing something already after you log in. Preview of the Homepage

Single-text-fields can be useful for editing short headlines, descriptions, paragraphs, and more. As for pages that have multiple paragraphs, features, or other things that require more content, you can use Multi-string fields.

Create a Multi-string field

Open up data.json and add a field "paragraphs" as an array of strings. This array can be of any length.

{
  "homepage": "This is the text that goes on the homepage",
  "paragraphs": ["This is paragraph One", "This is paragraph Two", "I'm the third paragraph"]
}

In this example, the length of this array will be three and generate three editable text fields. String Field Paragraphs

Array Field

Array Fields are particularly useful for simple blogs and other storage functions where authentication isn't required.

Create a new field "posts" and set it to an empty array.

{
  "homepage": "This is the text that goes on the homepage",
  "paragraphs": ["This is paragraph One", "This is paragraph Two", "I'm the third paragraph"],
  "posts": []
}

Go schemas.json and add an object "posts". From there you can set the input fields. Make sure the field in schemas.json is the same name as data.json.

{
  "posts": {
    "title": "text",
    "text": "textarea",
    "date": "date",
    "luckynumber": "number"
  }
}

That, of course, is just an example. "date" and "luckynumber" exist as examples to show what types of inputs there are. The type of input (besides "textarea") will always be a type in an html tag. If "textarea" is used, a

Now go to your admin dashboard and try it out. After creating a post, you should see a new element added to your schema array in data.json.

{
  ...
  "posts": [
    {
      "title": "Title",
      "text": "Test Text",
      "date": "2022-01-21",
      "luckynumber": "1",
      "id": "d8d2ef38-b02c-496b-9833-c53fa3b063c9"
    }
  ]
}

All schema-type array fields automatically will be given a random uuid.

You may add as many fields to the data.json object as you want. All top-level object keys will be added and editable in the dashboard.

Accessing the data

To get the data from data.json and use it in your pages, simply import it in one of your pages and use it as a valid javascript object.

import json from '../../data/data.json';

export default function Home(){
  return (
    <div>
      <h1>{json.headline}</h1>
    </div>
  );
}

You can access the json file from the client side of your application as well as the server side.

Writing to data.json

Writing to data.json from anywhere else besides the original admin api routes can be done from another api route. You may use the writeJSON function which is located under scripts/util.js.

The writeJSON function takes a single parameter, which is a function that should return an object.

The object returned will overwrite the entire json file completely.

{
  "field": "value"
}
writeJSON((json) => ({
  ...json,
  //updating a field
  "field": "newvalue",
  //adding a new field
  "field2", "value"
}))

Troubleshooting

If for some reason you are getting internal server errors on vercel or something, that means the path to the JSON file is incorrect. Go to scripts/util.js and edit the path of the JSON file or set the env value JSON_PATH to the correct folder path. By default, the json file is in .next/.../data/data.json but it might be elsewhere in production.

You might also like...

A simple dashboard to keep track of all your active devices/servers

A simple dashboard to keep track of all your active devices/servers

Slashboard Pulsar A lightweight node js app designed to work with the Slashboard desktop client Built using Node.js Installation Clone this repository

Dec 21, 2022

A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

WordPressWooCommerceDashboard - A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed. This program provides shipping tracking for Delhivery.

Jan 3, 2022

A dashboard for managing Mineflayer bots, used for Hychat.

The dashboard uses Next.js and Chakra UI to create an interactive dashboard to manage Hypixel bot(s) and view chat logs. It also fetches messages from a back-end using an API (found in src/pages/api).

Aug 2, 2022

Simple & Quick Access Addon For Homer Dashboard

Simple & Quick Access Addon For Homer Dashboard

Homer Dashboard - Firefox Addon Quick Access Homer Dashboard - Firefox Addon Usage Install Addon [ Firefox ] Configure The Addon Add The Quick Access

Jan 22, 2022

A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.

A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.

Weather Dashboard A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data. User Story AS A traveler I WANT to se

Apr 19, 2022

Weather-magic - Working with APIs to create a weather dashboard

Weather-magic - Working with APIs to create a weather dashboard

Weather Magic link to website Following the link above will bring you to the Wea

Feb 3, 2022

AMP: is a fast admin dashboard template based on FastAPI

AMP: is a fast admin dashboard template based on FastAPI

AMP: is a fast admin dashboard template based on FastAPI Introduction AMP: is a fast admin dashboard template based on FastAPI. The project uses its o

Jan 1, 2023

Replacement for comma.ai backend and useradmin dashboard

Replacement for comma.ai backend and useradmin dashboard

Replacement for comma.ai backend and useradmin dashboard. Bundled with a modified version of comma's cabana to allow viewing & analyzing drives.

Jan 1, 2023

A dashboard to display options-related data around PsyOptions markets and Serum orderbooks.

A dashboard to display options-related data around PsyOptions markets and Serum orderbooks.

PsyOptions Data Dashboard Digestible data around options activity on Solana is pretty inaccessible at the moment. PsyViz provides a clean and user-fri

May 13, 2022
Owner
IroncladDev
I changed from LeviathanProgramming to IroncladDev. Sixteen-year-old fullstack MERN developer with over five years of experience. <3 Next.JS
IroncladDev
Dashboard skeleton Simple and fast dashboard skeleton template

Dashboard skeleton Simple and fast dashboard skeleton template. Installation npm install --save dashboard-skeleton-compostrap Version 1x built on Boo

Compostrap 9 Aug 23, 2022
A mutex/semaphore implementation made easy to use.

A mutex/semaphore implementation made easy to use. Why superlock aims to be: Simple: Designed for usage with async and await Powerful: Mutex & Semapho

Kiko Beats 7 Dec 12, 2022
A simple, web based dashboard to use with LibAFL + OnDiskJSONMonitor

[WIP] Interactive LibAFL Dashboard This project aims to create a dashboard for a fuzzing campaign for LibAFL. Therefore, the OnDiskJSONMonitor must be

Sönke 21 Sep 3, 2022
jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Renan LAVAREC 2 Jan 18, 2022
An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi

null 16 Aug 29, 2022
🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Blazity 30 Dec 1, 2022
A RESP 'Redis Serialization Protocol' library implementation to generate a server, uses a similar approach to express to define you serer, making it easy and fast.

RESPRESS A RESP 'Redis Serialization Protocol' library implementation to generate a server, uses a similar approach to express to define you serer, ma

Yousef Wadi 9 Aug 29, 2022
The Next.js reference implementation on how to design better APIs

This is the Next.js reference implementation of my blog bost on How to design better APIs. Getting Started Clone the repository git clone https://gith

Ronald Blüthl 7 Nov 22, 2022
A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol and uWebSockets.js

speedymppserver A quotaless, partially limitless, and fast Node.js Multiplayer Piano server implementation that efficiently makes use of the protocol

Lapis 4 Oct 14, 2022
A complete COVID-19 tracker cum dashboard website made by me.

Covidview A detailed dashboard of live COVID-19 cases. Techs Used: React JS React Hooks and DOM Firebase WHO disease API Demo Video : covid.mp4 Workin

MAINAK CHAUDHURI 24 Dec 17, 2022