✨ ispykenny.com

Stack

• CMS WordPress
• Next.js (App Dir): Learn more Next.js
• GraphQL for data fetching WPGraphQL
• Tailwind for styling Tailwind
• Sendgrid for contact form Sendgrid

Examples

---

Child Routes

Child routes make the fetchPageData($slug) (path: api/get-page-data/$slug) request. This request does the following:

It gets the slug template so it can use the associated graphql query

Templates that are supported

• About
• Blog
• Contact
• Connect
• Default
• Home

const pageTemplate = await getPageTemplate(slug);

  const templateQuery: TemplateQueryMap = {
    [Template.About]: AboutTemplateQuery,
    [Template.Blog]: BlogTemplateQuery,
    [Template.Contact]: ContactTemplateQuery,
    [Template.Connect]: ConnectTemplateQuery,
    [Template.Default]: DefaultTemplateQuery,
    [Template.Home]: HomeTemplateQuery,
    [Template.undefined]: HomeTemplateQuery,
  };

  const pageData = await gqlClient.request(
    templateQuery[pageTemplate as Template],
    {
      slug,
    },
  );

  return NextResponse.json({
    status: 200,
    data: pageData,
    template: pageTemplate,
  });

and the [child]->page.tsx will use:

export default async function ChildPage({
  params,
}: {
  params: { child: string };
}) {
  const childSlug = params.child;
  const fetchData = await fetchPageData(childSlug);
  const { data, template } = await fetchData.json();

  const templates: { [key: string]: JSX.Element } = {
    [Template.About]: <AboutTemplate data={data} />,
    [Template.Connect]: <ConnectTemplate />,
    [Template.Contact]: <ContactTemplate data={data} />,
    [Template.Blog]: <BlogTemplate data={data} />,
  };

  const TemplateComponent = templates[template] || <>Page not found</>;
  return TemplateComponent;
}