NextJS User List From JSON Placeholder API

Summary

A simple website displaying users from the JSON placeholder website using the React SSG Next JS.

https://jsonplaceholder.typicode.com/users

It’s using older versions of React and Next.

"dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
}

I have other posts using React version 18 and Next JS version 13.

This website demonstrates some features from Next JS:

Next Image
Next Head
Next Link
Page Routing - home page, about us page and user listing page.
Components eg. Footer, Layout, Navbar
getStaticProps
getStaticPaths
API endpoint
CSS Modules

Tech and Tools

JavaScript
CSS
HTML
Next JS
GitHub
Vercel

Sample Code

index.js

import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import Footer from '../comps/Footer';
import Navbar from '../comps/Navbar';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <>
      <Head>
        <title>User List | Home</title>
        <meta
          name="description"
          content="This is the home page for the JSON Placeholder Users list."
        />
        <meta name="keywords" content="JSON Placeholder Users" />
      </Head>
      <div>
        <h1 className={styles.title}>Welcome: JSON Placeholder Users</h1>

        <p className={styles.text}>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat odio,
          tempora porro sit voluptatum voluptatibus illo quaerat nisi tempore,
          ea aliquid obcaecati hic. Debitis et quos nulla eligendi eaque
          voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Placeat odio, tempora porro sit voluptatum voluptatibus illo quaerat
          nisi tempore, ea aliquid obcaecati hic. Debitis et quos nulla eligendi
          eaque voluptatibus!
        </p>

        <p className={styles.text}>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat odio,
          tempora porro sit voluptatum voluptatibus illo quaerat nisi tempore,
          ea aliquid obcaecati hic. Debitis et quos nulla eligendi eaque
          voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Placeat odio, tempora porro sit voluptatum voluptatibus illo quaerat
          nisi tempore, ea aliquid obcaecati hic. Debitis et quos nulla eligendi
          eaque voluptatibus!
        </p>

        <Link href="/users">
          <a className={styles.btn}>See User Listing</a>
        </Link>
      </div>
    </>
  );
}

Navbar.js

import Link from 'next/link';
import Image from 'next/image';

const Navbar = () => {
  return (
    <nav>
      <div className="logo">
        <Image src="/logo.svg" width={128} height={77} alt="Logo" />
      </div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Link href="/users">
        <a>User Listing</a>
      </Link>
    </nav>
  );
};

export default Navbar;

Demo

Open demo on Vercel.

Link to Demo

Repo

Open GitHub Repository.

Link to Repo