Error when using frontpage option in WordPress

[pdenissen]

Hi there,

I'm pretty new to Nextjs. This is a great starter point for getting into Nextjs combined with WP.
I am trying to set a page as the homepage. For this in WP there is this setting to set a static page as the frontpage.
When I do this, the homepage isn't changing.

If I click on one of my menu-items i'm getting the error:
Error: A required parameter (slugParent) was not provided as a string in getStaticPaths for /[slugParent]/[[...slugChild]]

I'm not sure where to start.
I have tried to change the src/pages/index.js. But I wasn't sure if that's the right approach.

I hope someone can point me in the right direction.

Thank you!

[colbyfayock]

hey @pdenissen the starter isn't configured to dynamically create a frontpage based on the wordpress setting, you would have to customize that yourself inside of Next.js by updating the index.js file like it seems like you were trying tod o

it looks like you have a menu item though that doesn't exist as a page?

[pdenissen]

Hej @colbyfayock,
Thanks for your reply. Good to know that it's best practise to set it up myself.

According the error; when I don't set a frontpage in the wp-admin, than my links to my static pages are working fine. However, when I do set it to 'frontpage' than i'm getting the error when I click on one of the links in my menu.

If you need any specific information on this, let me know.

Thanks!

[jonnymaceachern]

@pdenissen Did you figure this out?

My frontpage is a standard WordPress Page and no different than any other page, except that it's set as the Homepage setting in WP Dashboard > Settings > Reading:

However, setting the Homepage results in the following:

1. An error when navigating to any Page that isn't the homepage

Error: A required parameter (slugParent) was not provided as a string in getStaticPaths for /[slugParent]/[[...slugChild]]

2. The homepage (/) doesn't use the same template as /[slugParent]/[[...slugChild]].js. I would like this to since it's a standard page and uses the same Gutenberg blocks.

[colbyfayock]

@jonnymaceachern for the page template, you can take an approach similar to what i did with Archives, where you can create a Page template and use it as a component

https://github.com/colbyfayock/next-wordpress-starter/blob/main/src/templates/archive.js
https://github.com/colbyfayock/next-wordpress-starter/blob/main/src/pages/posts.js

[fadichmn]

When using graphql there is a field called isFrontPage inside the pages query. Simply add it after menuOrder on line 19 inside src/data/pages.js

Then this is my modified index.js where I added a simple if statement where the page is a frontpage.

import useSite from 'hooks/use-site';
import { getAllPages } from 'lib/pages';
import { WebsiteJsonLd } from 'lib/json-ld';

import Layout from 'components/Layout';
import Header from 'components/Header';
import Section from 'components/Section';
import Container from 'components/Container';

export default function Home({ pages }) {
  const { metadata = {} } = useSite();
  const { title } = metadata;

  return (
    <Layout>
      <WebsiteJsonLd siteTitle={title} />
      <Header></Header>

      <Section>
        <Container>
          {pages.map((page) => {
            if (page.isFrontPage) {
              return (
                <div key={page.id}>
                  <h2>{page.title}</h2>
                  <div dangerouslySetInnerHTML={{ __html: page.content }} />
                </div>
              );
            }
          })}
        </Container>
      </Section>
    </Layout>
  );
}

export async function getStaticProps() {
  const { pages } = await getAllPages({
    queryIncludes: 'all',
  });
  return {
    props: {
      pages,
    },
  };
}