Configure custom layout for homepage in Next.js Landing Pages Template

Great question! Yes, you can definitely configure a custom layout for your homepage in the Next.js Landing Pages Template. Based on a previous discussion about this exact issue, here's how to do it:

Solution: Edit your next.config.js

The template uses the next.config.js file to map routes to page templates. By default, all routes (including /) use the LandingPage template, except /custom-page which uses the CustomPage template.

To direct your homepage to a custom layout:

1. Modify the exportPathMap function in your next.config.js to map the root path (/) to your custom page:

exportPathMap: function () {
  return client.fetch(query).then((res) => {
    const { routes = [] } = res;
    const nextRoutes = {
      // Routes imported from sanity
      ...routes.filter(({ slug }) => slug.current).reduce(reduceRoutes, {}),
      "/": { page: "/CustomPage" }, // Add this line
    };
    return nextRoutes;
  });
}

1. Create your custom layout in the CustomPage.js file (or create a new one) where you can hide the footer or make any other layout changes specific to your homepage.

Alternative Approach

If you only need to hide the footer on the homepage, you could also check the current slug inside the LandingPage component and conditionally show/hide the footer based on whether you're on the homepage:

{router.query.slug !== '/' && <Footer />}

This approach is simpler if you just need minor variations rather than a completely different layout.

Note: This template uses an older Next.js Pages Router pattern with exportPathMap. If you're working with a newer Next.js setup, you'd typically handle this through the file-based routing system or dynamic routes instead.