Unlock seamless workflows and faster delivery with our latest releases- get the details

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

7 replies
Last updated: Aug 31, 2020
Happy Friday šŸ‘‹ - I am using the Next.js Landing Pages Template. At the moment all pages default to the 'LandingPage' layout, however I'd like to create a custom layout just for my homepage (to hide the footer etc). Is there a way for me to configure this? To direct 'frontpage' and '/' to the CustomLayout.js rather than the LandingPage.js?
May 29, 2020, 10:15 AM
Hi User, this should be possible by editing your
next.config.js
file. By default it uses the
LandingPage
template for all routes including
/
, with the exception of
/custom-page
, which gets the
CustomPage
template. You could edit how it builds the routes here.
Alternatively, you might be able to simply check for current slug inside
LandingPage
and show/hide the footer accordingly, for example.
Let me know if that gives you enough hints to go on
šŸ™‚
May 29, 2020, 10:59 AM
Hi User, this should be possible by editing your
next.config.js
file. By default it uses the
LandingPage
template for all routes including
/
, with the exception of
/custom-page
, which gets the
CustomPage
template. You could edit how it builds the routes here.
Alternatively, you might be able to simply check for current slug inside
LandingPage
and show/hide the footer accordingly, for example.
Let me know if that gives you enough hints to go on
šŸ™‚
May 29, 2020, 10:59 AM
Perfect thanks User, I've directed the homepage to custompage and created a specific layout for this now. All working šŸ™Œ
May 29, 2020, 11:42 AM
Awesome, User šŸŽ‰ Happy Friday to you too!
May 29, 2020, 11:43 AM
Hey
user M
- me again. I've run into an issue with my routing to custom page. As mentioned I redirected the '/' slug to go to the custom-page and made a new template in there just for the homepage (so I could hide the footer. It works fine when you access the homepage from the navigation HOWEVER if you just hit localhost:3000 it goes to a blank page. I'm guessing there is some more config I need to do?
My next.config.js

const withCSS = require("@zeit/next-css");
const client = require("./client");

const isProduction = process.env.NODE_ENV === "production";
const query = `
{
  "routes": *[_type == "route"] {
    ...,
    disallowRobot,
    includeInSitemap,
    page->{
      _id,
      title,
      _createdAt,
      _updatedAt
  }}
}
`;

const reduceRoutes = (obj, route) => {
  const { page = {}, slug = {} } = route;
  const { _createdAt, _updatedAt } = page;
  const { includeInSitemap, disallowRobot } = route;
  const path = route["slug"]["current"] === "/" ? "/" : `/${route["slug"]["current"]}`;
  obj[path] = {
    query: {
      slug: slug.current,
    },
    includeInSitemap,
    disallowRobot,
    _createdAt,
    _updatedAt,
    page: "/LandingPage",
  };
  return obj;
};

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: isProduction ? "[hash:base64:5]" : "[name]__[local]___[hash:base64:5]",
  },
  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" },
      };
      return nextRoutes;
    });
  },
});
my Header.js
Jun 2, 2020, 10:50 AM
import React, { Component } from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { withRouter } from "next/router";
import SVG from "react-inlinesvg";
import styles from "./Header.module.css";
import HamburgerIcon from "./icons/Hamburger";

class Header extends Component {
  state = { showNav: false };

  static propTypes = {
    router: PropTypes.shape({
      pathname: PropTypes.string,
      query: PropTypes.shape({
        slug: PropTypes.string,
      }),
      events: PropTypes.any,
    }),
    title: PropTypes.string,
    navItems: PropTypes.arrayOf(
      PropTypes.shape({
        title: PropTypes.string.isRequired,
        slug: PropTypes.shape({
          current: PropTypes.string,
        }).isRequired,
      })
    ),
    logo: PropTypes.shape({
      asset: PropTypes.shape({
        url: PropTypes.string,
      }),
      logo: PropTypes.string,
    }),
  };

  componentDidMount() {
    const { router } = this.props;
    router.events.on("routeChangeComplete", this.hideMenu);
  }

  componentWillUnmount() {
    const { router } = this.props;
    router.events.off("routeChangeComplete", this.hideMenu);
  }

  hideMenu = () => {
    this.setState({ showNav: false });
  };

  handleMenuToggle = () => {
    const { showNav } = this.state;
    this.setState({
      showNav: !showNav,
    });
  };

  renderLogo = (logo) => {
    if (!logo || !logo.asset) {
      return null;
    }

    if (logo.asset.extension === "svg") {
      return <SVG src={logo.asset.url} className={styles.logo} />;
    }

    return <img src={logo.asset.url} alt={logo.title} className={styles.logo} />;
  };

  render() {
    const { title = "Missing title", navItems, router, logo } = this.props;
    const { showNav } = this.state;

    return (
      <div className={styles.root} data-show-nav={showNav}>
        <h1 className={styles.branding}>
          <Link
            href={{
              pathname: "/CustomPage",
              query: {
                slug: "/",
              },
            }}
            as="/"
            prefetch
          >
            <a title={title}>{this.renderLogo(logo)}</a>
          </Link>
        </h1>
        <nav className={styles.nav}>
          <ul className={styles.navItems}>
            {navItems &&
              navItems.map((item) => {
                const { slug, title, _id } = item;
                const isActive =
                  router.pathname === "/LandingPage" && router.query.slug === slug.current;
                return (
                  <li key={_id} className={styles.navItem}>
                    <Link
                      href={{
                        pathname: "/LandingPage",
                        query: { slug: slug.current },
                      }}
                      as={`/${slug.current}`}
                      prefetch
                    >
                      <a data-is-active={isActive ? "true" : "false"}>{title}</a>
                    </Link>
                  </li>
                );
              })}
          </ul>
          <button className={styles.showNavButton} onClick={this.handleMenuToggle}>
            <HamburgerIcon className={styles.hamburgerIcon} />
          </button>
        </nav>
      </div>
    );
  }
}

export default withRouter(Header);
Jun 2, 2020, 10:50 AM
Iā€™m having the same issue with blank page when hitting: localhost:3000. Actually I get this message
No route set
Setup automatic routes in sanity or custom routes in next.config.js
Aug 31, 2020, 5:24 AM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?