Update application

You need to modify the app to have a few different pages. This will make it easier to incorporate Uniform Context functionality into the app.

Update the home page

Edit the following file:

/pages/index.js

import Layout from "../src/components/Layout";

import content from "../lib/content.json";

export async function getStaticProps() {
  const slug = "/";
  const topic = content.find((e) => e.url == slug);
  return { props: { fields: topic.fields } };
}

export default function Home({ fields }) {
  return <Layout content={content} fields={fields} />;
}

About these changes

These changes cause the home page to read content from the content file & to use the layout component to display that content.

Add page for topics

Add the following file:

/pages/[topic].jsx

import Layout from "../src/components/Layout";

import content from "../lib/content.json";

//
//Next.js uses this function to determine the
//dynamic routes this component can handle.
//It should handle all routes that represent
//topics.
export async function getStaticPaths() {
  const topics = content.filter((e) => e.type == "topic");
  const paths = topics.map((e) => {
    return { params: { topic: e.id } };
  });
  return { paths, fallback: false };
}

//
//Since this component supports dynamic routes,
//Next.js uses this function to determine the
//props to use based on the current route.
//This function returns the "fields" values
//from the content file.
export async function getStaticProps({ params }) {
  const topic = content.find((e) => e.id == params.topic);
  return { props: { fields: topic?.fields } };
}

export default function Topic({ fields }) {
  return <Layout content={content} fields={fields} />;
}