Create a Resources Page from Local Data

Next.js

React

JavaScript

Technical Specification

Import a local JSON or JS data file and render a resources list in a Next.js page.

Input/Output Samples

Input:5 resource items

Output:Resources page lists all items

Optimal Logic Path

import { resources } from "@/data/resources";

export default function ResourcesPage() {
  return (
    <main>
      <h1>Resources</h1>
      <ul>
        {resources.map((r) => (
          <li key={r.slug}>{r.title}</li>
        ))}
      </ul>
    </main>
  );
}

Architectural Deep-Dive

Local data imports are super fast and work great for static content like resource lists.