The template I used to bootstrap this project produces a simple blog site with an index page linking to slugged post pages. Since I knew I wanted a static home page, one of the first things I did when I began digging was to update the content of the site index to parity with the site it would be replacing.

I did this by moving the blog index code from /pages/index.tsx to a new file, /pages/posts/index.tsx.

Next, in WordPress, I created a new page and populated it with the resume content from my old site. In my Next.js code, I added a new GraphQL query in /lib/api.ts to fetch the content for this page:

export async function getResume(id = RESUME_PAGE_ID) { 
  const data = await fetchAPI(` 
    query Resume($id: ID!) { 
      page(id: $id) { 
        guid 
        id 
        slug 
        title(format: RENDERED) 
        content(format: RENDERED) 
        uri 
        date 
      } 
    } 
  `, 
    { 
      variables: { 
        id, 
      } 
  }) 
 
  return data?.page 
}

I then refactored /pages/index.tsx to use the response from getResume() to populate a very simple /components/resume.tsx:

export default function Resume({ content }) {
  return (
    <div className="max-w-2xl mx-auto">
      <div
        className={styles.resume}
        dangerouslySetInnerHTML={{ __html: content }}
      />
    </div>
  )
}

This small amount of effort brought the content on this site more or less in line with the content on my old site – it was after all only a single page displaying my resume and contact info. But I was off to a good start with the flexibility provided by GraphQL making these changes a breeze.