Adding a Next.js Administration Dashboard to your site in seconds

Making an administration dashboard for all my freelance clients is always a challenge. It's just annoying to create a new database, add it to your site, enable authentication, etc.

It's understandable why a lot of people use Wordpress instead of raw code, mainly for the reason of the dashboard and how easy it is to edit things.

Guess what? I just changed that for all you React and Next.js developers out there. You won't have to use Wordpress over your favorite stack anymore or spend hours sweating your brain out coding an admin dashboard. All it takes to implement this is a git clone, editing some JSON and ENV values, and your dashboard is ready to go!

Take a look at the demo and try it out!
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.

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.

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 <input> tag. If "textarea" is used, a <textarea> tag will be generated.

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"
}))

Have fun, try your best to not abuse the playground demo too much, and feel free to use this admin page in any of your projects.

---

Liked this? Be sure to follow me on dev, subscribe to me at my website, and support this post with a couple of reactions!

Comments

[copperfox777]

Its not an admin board but something strange

[Ben Heidemann]

Bit harsh 😂

[Pxlmastr]

Great post, but I just wanted to say it was cool having you on the Replit community, and I wish you luck wherever you go

[Venkatesh KL]

Hey, that looks interesting & nice. Keep going.
There's an issue in the GitHub repo link. It's missing an 'n' at the end. Please do check
Cheers

[Conner Ow]

Ah thanks, I'll fix that.

[Adedamola Daniel]

You should check out strapi and airtable. Can draw some inspiration from them...you're on the right track. With a lot of hardwork, you'll get there.

For now, cheers!

[Froxx93]

I also just discovered Strapi and am very happy with it so far.

For those not knowing, Strapi offers:

1. an (already nicely styled) dashboard in a similar way Wordpress does
2. a simple and dynamic way to define any types of content
3. an easy REST api you can access from your website
4. out of the box working user database, permission management and authentication

The real charm is that Strapi doesn't care about final displaying / formatting at all but only about creating data. It really is only a CMS (CONTENT management system), not a website generator including HTML layouts, CSS, etc. So if you want to create your own website that takes unformatted data and displays it nicely, getting this data served by Strapi is a nice way to go.

OP's project is a nice approach, but still in a very early stage. So for now I would suggest having a look into Strapi if people want to replace Wordpress, Typo, etc. with a more modern stack.