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/


   

DevGroves Technologies is a IT consulting and services start-up company which is predominately to web technologies catering to static website, workflow based CRM websites, e-commerce websites and reporting websites tailoring to the customer needs. We also support open source community by writing blogs about how, why and where it need to be used for.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter



Related Articles

React JS Developer Salary Overview

  • reactjs javascript salary

These days, web development is a need for any business - it attracts huge investments and can kick-start businesses. As for the tools mainly used for development, JavaScript is riding the wave right now. StackOverflow has been naming it the most popular programming language for six years straight. React, as one of the most popular JS libraries is also the first choice for interface developers. It offers some of the best web development tools for mobile and single-page applications.

Read More


Top 10 AI development tools which you should know in 2020

  • artificial-Intelligence neural-networks frameworks ai machine-learning

It is a fact the 2020 is not going the way we expected to be but when it comes to technology breakthrough we can say 2020 will be the heir of greatness. <br />Speaking of technical breakthroughs we have got artificial intelligence which is known to be taking over the mankind like a wildfire. Everything around us is connected through AI be it shopping travelling or even reading. Every other activity of ours is transforming into a whole new extent.

Read More


Build Simple Ecommerce site using React and Jotai

  • ecommerce react jotai

Retail Ecommerce website can be created quickly with React. It can be created using React, Bootstrap, React DOM and Jotai. Data flow within the commerce site is done using Jotai in a light-weight manner. The main workflow of showing all the items in the gallery to user and user adding to the cart will be done as part of this blog.

Read More


Best open source Text Editors

  • text-editor editor tools dev-tools

Text editors are mainly used by programmers and developers for manipulating plain text source code, editing configuration files or preparing documentation and even viewing error logs. Text editors is a piece of software which enables to create, modify and delete files that a programmer is using while creating website or mobile app.In this article, we will discuss about top 7 all-round performing text editors which is highly supportive for programmers.

Read More


SeoToaster: easy, fast and efficient open source CMS for top SEO performance

  • cms content-management-system seo ecommerce

SeoToaster is a free Open Source CMS & Ecommerce solution to build, manage and market websites optimized for for top search engine performance. As the name implies, Seo Toaster is to date the only content management system (CMS) to truly integrate SEO execution and web marketing automation technology in full compliance with the search engines industry’s best practices.

Read More



Glific - Open Source Two Way Communication Platform for Social Sector Organizations

  • glific elixir communication architecture social-sector

Glific is an open source two way communication platform with primary focus on helping social sector organizations to interact with millions of beneficiaries concurrently through automated messages with rich media content and manual intervention wherever required. With Glific one can design flows to automate conversations, see how each of the beneficiaries is interacting with the bot and measure engagement.

Read More


JHipster - Generate simple web application code using Spring Boot and Angular

  • jhipster spring-boot angular web-application

JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

Read More


Know everything about Dependency Injection in Magento 2

  • magento dependency-injection php

Magento 2 is no longer a buzzing term. Since Its inception one and a half years ago, developers are in love with its rich technology stack. The following post emphasizes on Dependency Injection (DI), one of the best design patterns that Magento 2 uses.

Read More


Laravel eCommerce Platform - Bagisto

  • ecommerce shopping laravel php

Nowadays on the web, Shopping is one of the most popular activities. Everyone can shop at their recess, anytime from anywhere. However, this is interesting that anyone can have their pages built to display their favourite products and services.

Read More


AbanteCart - Easy to use open source e-commerce platform, helps selling online

  • e-commerce ecommerce cart php

AbanteCart is a free, open source shopping cart that was built by developers with a passion for free and accessible software. Founded in 2010 (launched in 2011), the platform is coded in PHP and supports MySQL. AbanteCart’s easy to use admin and basic layout management tool make this open source solution both easy to use and customizable, depending on the skills of the user. AbanteCart is very user-friendly, it is entirely possible for a user with little to no coding experience to set up and use this cart. If the user would be limited to the themes and features available in base AbanteCart, there is a marketplace where third-party extensions or plugins come to the rescue.

Read More


How to make money from Open Source

  • opensource how-to money

As open source getting popular day by day, many have questions like How to make money from Open Source? Lot more products are getting introduced and don't know who is making money. Certainly open source means, give the product and source for free then how to make money? Yes sell the product for free but get paid for its services.

Read More


Web based commenting system. Embed directly in to your site

  • comment free commenting-system

Comments are very important for a blog or website to get feedback from their users. Comments could be threaded where users could be discuss and post reply to the comment. Here we going discuss about the most popular and widely used free commenting system. You need to embed their javascript code in your every page and it will take care the rest of the task.

Read More


10 Free services for your Website / Blog. Just plug it.

  • free website blog free-service free-resources

Each website / blog delivers useful content or service to its users. But website themselves requires some service to monitor and increase its presence. Here are few free services which could be used by Website / Blog. This will be very much helpful for small business owners.

Read More


Open source is the backbone for Startups

  • opensource open-source startups

Many startups are entering in to the business due to open source. Open source acts as a back bone / pillar for their business. It reduces the cost of production, Generates revenue from consulting and support. This article describes about the startups which flourished because of open source. Sun acquired MySQL for $1Bn is the biggest achievement for open source startups.

Read More


React Window - Optimized way to display large list

  • react react-window large-list

In Web development, there will be always a need to display content in a large list. Rendering a large list will slow down the web page load and increase the First Contentful Paint(FCP). Usually large lists are displayed in a paginated grid where user has to move around pages by clicking next. It will be good user experience, if the same page provides data of large list as and when we scroll.

Read More


LogicalDOC - Open Source DMS

  • dms document-management-system

LogicalDOC is both a document management and a collaboration system. The software is loaded with many functions and allows organizing, indexing, retrieving, controlling and distributing important business documents securely and safely for any organization and individual.

Read More


COVID19 Stats using Angular Material Design

  • angular material-design covid covid-stats

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. In this article, we will build COVID stats using Angular Material design.

Read More


React Media Lightbox

  • lightbox gallery react audio video

Lightbox is a popular and widely used concept for showing the gallery of media files. It is a very impressive approach for the end user to glance through media files. Media files like audio or video will load the html audio or video controls.

Read More


Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More


Thymeleaf - Text display, Iteration and Conditionals

  • thymeleaf template-engine web-programming java

Thymeleaf is a server-side Java template engine for both web and standalone environments. It is a better alternative to JavaServer Pages (JSP). Spring MVC and Thymeleaf compliment each other if chosen for web application development. In this article, we will discuss how to use Thymeleaf.

Read More







We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.