1. Build a website with the starter kit

Display the event page

We're almost there. Now that you have extended the content model and all the elements are in place, you can open the website and view the event page.

event page example
Note

You can see the event ID in the Details section of the event details page. Go to Content Hub ONE and, on the menu bar, click Content. From the Content type filter list, click Event, and then click the event to open its details page.

To display the event page:

  1. In Visual Studio Code, open the starter kit repository and go to the /pages folder.

  2. Make a copy of the index.tsx page and name it event.tsx.

  3. In the function, export async function getStaticProps, add the line const event = await getEventById('YOUR_EVENT_ID'), inserting the event ID from your Content Hub ONE instance.

  4. Modify the header elements to display the event data:

    • Add the following import statements after line 2: import Event from '../types/Events/events-type'; and import RichText from '../components/Common/richText-component';

    • Update the event object to display the h1 with event.eventName.

    • Update event.eventImage?.results[0]?.fileUrl for the hero banner.

    • Update event.eventDescription within a RichText Component. The event description is returned as a JSONContent object. Look at the [slug].tsx file located in the /pages/Recipes folder to see that those JSONContent objects can be rendered using the richText-component passing the JSONContent.

    • Remove import RecipeTeaserComponent from '../components/Recipe/recipeTeaser-component';.

    • Remove RecipeTeaserComponent allRecipes={allHomepage[0].recipes}/ .

  5. Run npm run dev.

The final code should look like this.

event.tsx
 
import Head from 'next/head'
import HeaderComponent from '../components/Homepage/header-component'
import Event from '../types/Events/events-type';
import RichText from '../components/Common/richText-component';
import stylesHp from '../styles/Homepage/Homepage.module.css';
import {getAllHomepage, getHomepageById} from "../lib/Homepage/homepage-lib";
import Homepage from "../types/Homepage/homepage-type";
import FooterComponent from '../components/Homepage/footer-component';
import Image from 'next/image';
import HeroBanner from '../components/Homepage/hero-banner';
import { HOMEPAGE_ID } from '../lib/Common/constants';
import { getEventById } from '../lib/Events/event-lib';

export async function getStaticProps({ preview = false}){
 const allHomepage = await getAllHomepage(preview);
 const homepage = await getHomepageById(HOMEPAGE_ID);
 const event = await getEventById(' YOUR_EVENT_ID ');
 return{
   props: {allHomepage, homepage, preview},
   // Next.js will attempt to re-generate the page:
   // - When a request comes in
   // - At most once every 10 seconds
   revalidate: 10, //in seconds
  }
}
type Props = {
 allHomepage: Homepage[];
 homepage: Homepage;
 event: Event;
}
const Homepage = ({allHomepage, homepage}: Props) = {
 //const homepage = allHomepage[0];

  return (
   div className={stylesHp.container} 
     Head 
      title Event /title 
      meta name="description" content="Generated by create next app" / 
      link rel="icon" href="/favicon.ico" / 
     /Head 

     main className={stylesHp.main} 
      HeaderComponent
      allHeaders={homepage.header}
      / 
      HeroBanner
       heroImageUrl={event.eventImage?.results[0]?.fileUrl}
       altText=''
      / 

    div className={stylesHp.boxedContainer} 
     h1 className={stylesHp.title} 
      {event.eventName}
     /h1 
     RichText
      richText={event.eventDescription}
     / 

    /div 

    FooterComponent
     allFooters={homepage.footer}
    / 

   /main 

  /div 
 )
}

export default Homepage;

You can now navigate to http://localhost:3000/event to open the website and verify that everything works.

If you have suggestions for improving this article, let us know!