Build Consulting Website using Next.js

       0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

One of the popular web framework for building Single page application (SPA) or static site is React library. Application built with React packages will be rendered completely on the client side browser. If you want to reduce the load on client side browser, we need to pre-render the pages in server (Serer side rendering) and serve it to the client. So the client loads the page like simple html page. Also if the pages are rendered from server then search engine will be able to fetch and extract the pages. To do SSR for React, the best abstraction framework is Next.js. If you have not used React, please get hands-on experience on react by looking at the tutorials.

Next.js is a websdk developed by Vercel and contributed to the open source community. Next.js is MIT licensed. Project is available in public github repository. It provides all the features required for production SSR Web UI applications : Hybrid static & server rendering, TypeScript support, Smart bundling, Route pre-fetching, and more. Tools required to make web develop faster are available like Image optimization, Internationalization, Zero config, Incremental static regeneration, Fast refresh, File-system routing, Api routes, Code splitting and Bundling.

In this article, we will develop SEO friendly consulting template website by learning the concepts of Next.js. It will be typical consulting template site of having the home page, services offered, about us and contact us static pages. 

Setup:

NextJs is supported in all the popular OS Platforms like MacOS, Windows and Linux. To create next app, we need to install nodeJs versions > 12.22.0.  Remaining npm package installation will be taken care, if we run the below command.
    

npx create-next-app@latest

If there are any npm version conflicts, error message itself will guide us on how to resolve it. In my scenario, it asked for specific node version.

  info "@next/swc-win32-x64-msvc@12.1.6" is an optional dependency and failed compatibility check. Excluding it from installation.
  error eslint-scope@7.1.1: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.0"
  error Found incompatible module.
  info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

  Aborting installation.
    yarn add --exact --cwd /opt/projects/typescriptnextjs/my-app --dev eslint eslint-config-next typescript @types/react @types/node @types/react-dom has failed.

Then i upgrade the node version like "nvm install 14.17.0". After that re-run the npx create app command to create the application. Project will be available under the project app name directory. 

Pages:

Index.jsx (./pages/index.jsx) will be the home page of the next js app. Pages are initialized by App component which gets generated default. There is one more main component i.e App component(./pages/_app.js) loads the pages and send the props to the respective pages. Adding a global styles can be done in the app component file. Detailed description of the app component overrides and  caveats are mentioned in the docs.  

  import "../styles/common.css";
  import "bootstrap/dist/css/bootstrap.min.css";
  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }

  export default MyApp;

To build a responsive website, we will include bootstrap css file. Also add common.css to have our custom styles across the page.

Consulting template:

In a consulting template, we basically have the four basic pages like Home, Service, About, Contact. For each page, we will create a jsx files under ./pages/ directory. Top header or nav bar will be common across all the pages and footer also it will be the same. These two we will make it as component and plug it in all the pages. It is typically static website so will go through a home page on the same fashion other pages will be built.

Home Page(./pages/index.jsx):

We basically create a Home function like react component and return the data. So when we start the server by default this page will be shown up.

export default function Home() {
  return (
    <>
    // going to place the code here..
    </>
  );
}

Each page need to be searchable by search engine, so we need to add the meta tags to the Head section of the HTML. Next.js has built-in component HEAD for appending elements to the head section of the page. Added the title and description with og prefix  for supporting open graph meta tags in order to easily share the page links in social networking sites.

      <Head>
        <title>DevGroves - Home Page</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <meta
          name="title"
          content="DevGroves Technologies"
        />
        <meta
          name="description"
          content="We work for consultancies, organizations and freelancers to build web applications, rest apis and chat bots."
        />
        <meta
          name="og:title"
          content="DevGroves Technologies"
        />
        <meta
          name="og:description"
          content="We work for consultancies, organizations and freelancers to build web applications, rest apis and chat bots."
        />
      </Head>

We need content to be displayed along with nice image for impressing the readers to read at it. In a container, we make a row which is divided into two halves for desktop kind of systems where left side will be the image and right side will be the content. To make this Container, Row and Col we will use the react bootstrap packages.

import { Container, Row, Col } from "react-bootstrap";

Below code snippet consists of the home page with styling to make the website have uniformed views. Apart from that, we have Header and Footer component added here which we will be see in next section. Breadcrumbs is a component to show the page detail only in mobile view.

      <Header />
      <Container>
        <Row className="center container-height">
          <Col md={6} sm={12} className="mobile-container">
              <Image src={Image1}  alt="Home page picture" height={400} width={600} 
				  className="zero-margin imgContain"/>
              <Breadcrumbs name="DevGroves Technologies" />
          </Col>
          <Col className="contentpadding" md={6} sm={12}>
            <h2>DevGroves is a dev community synergies to built 
				performance efficient technical solutions.</h2>
            <br/>
            <h6 style={{ textAlign: "justify" }}>
              We work for consultancies, organizations and freelancers 
			  to build web applications, rest apis and chat bots.</h6>
            <br/>
            <p style={{ textAlign: "justify" }}>
              Developers working from reputed software companies connected together to 
			  provide solutions by technically rational approach.</p>
            <p style={{ textAlign: "justify" }}>
              As we have senior dev peoples, we can work on technically 
			  intensive code development. Also make the cross platform desktop and 
			  mobile solutions using web technologies.</p>
            <br/><br/><br/>  
          </Col>
        </Row>
      </Container>
      <Footer />

Shared Components:

Shared components are the header, footer and breadcrumbs. Header component are responsible for making the logo with the navbar. It is made using the react bootstrap Navbar and Nav component. Onclick of the nav component, we need to route to the page. This is done using useRouter() hook which returns the router object. If we push the navigation url to router object, nextjs will find and route the page. This has been done by the navigate function in the header component. Not going to much detail about css of making the nav item highlighted, it is typically how conditional css class is done in React. There are also few tweaking of css styling for positioning the logo with the nav item.

./components/Header.jsx

import React, { useState } from "react";
import { Navbar, Container, Nav, Row } from "react-bootstrap";
import { useRouter } from "next/router";
import Image from "next/image";
import Logo from "../pages/images/logo.png";

export default function Header() {
  const router = useRouter();
  const navigate = (a) => {
    router.push(`/${a}`);
    console.log("location ", a, router.pathname);
  };
  return (
    <>
      <Container>
        <Navbar collapseOnSelect expand="lg" className="navbar-bg">
          <Container>
            <Navbar.Brand onClick={() => navigate("/")}>
              <Image src={Logo} className="brandlogo" 
					alt="DevGroves" width="90" height="70" />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav>
                <Nav.Link className={`${router.pathname === "/" ? "activeNav" : ""}`} 
					onClick={() => navigate("")}>
                  Home
                </Nav.Link>
                <Nav.Link
                  className={`${router.pathname === "/services" ? "activeNav" : ""}`}
                  onClick={() => navigate("services")}
                >
                  Services
                </Nav.Link>
                <Nav.Link
                  className={`${router.pathname === "/about" ? "activeNav" : ""}`}
                  onClick={() => navigate("about")}
                >
                  About
                </Nav.Link>
                <Nav.Link
                  className={`${router.pathname === "/contact" ? "activeNav" : ""}`}
                  onClick={() => navigate("contact")}
                >
                  Contact
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
        <hr className="bottomMargin"></hr>
      </Container>
    </>
  );
}

Breadcrumbs:

In mobile, it will be difficult to identify the navigated page location. So div block to show the navigation path which it received through the props from the parent component is done.

./components/Breadcrumbs.jsx

import React, { useEffect } from "react";
import { useState } from "react";

export default function Breadcrumbs(props) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    if (window.innerWidth <= 768) {
      console.log("show", show);
      setShow(true);
      console.log("window.innerWidth", window.innerWidth);
    }
  });
  return (
    <>
      {show && (
        <div className="centered">
          <h3>{props.name}</h3>
        </div>
      )}
    </>
  );
}

Footers:

Footer is just to display the copyright text at the bottom of page. It will be simple footer content with the container.

./components/Footer.jsx

import React from "react";
import { Container } from "react-bootstrap";
import styles from "../styles/Home.module.css";
export default function Footer() {
  return (
    <>
      <Container>
        <hr></hr>
        <footer className={styles.footer}>Copyright @2022 DevGroves Technologies.</footer>
      </Container>
    </>
  );
}

The above three components are plugged in all the pages to have the seamless experience. Below are snapshot of the different pages.

Same kind of layout repeated for other pages like services, contact and about us to show up the details of that particular page. For example, below code shows up Contact page by reusing the above components.

export default function Contact() {
  return (
    <>
      <Head>
        <title>Dev Groves - Contact Us</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <meta name="description" content="DevGroves - Contact Us" />
      </Head>
      <Header />
      <Container>
        <Row className="center container-height">
        <Col md={6} sm={12} className="mobile-container">
            <Image src={ContactUsImage} alt="Contact us image" 
			    height={400} width={600} className="imgContain" />
            <Breadcrumbs name="Contact us" />
          </Col>
          <Col className="zeropadding" md={6} sm={12}>
            <h4>Email Id:</h4> <span>devgrovestechnologies@gmail.com</span>
            <br />
            <br />
            <h4>Contact Us:</h4> +91-96292-30494
            <br />
            <br />
          </Col>
        </Row>
      </Container>
      <Footer />
    </>
  );
}

Source code: https://github.com/devgroves/consultingtemplatebynextjs/tree/vconsultingtemplate

Live site: https://devgrovestechnologies.vercel.app/