Posted on

A Guide to the Next JS Framework

Next.js is a framework extensively used by TikTok, Twitch mobile, Nike, IGN, PlayStation, Marvel, and many others. It offers all the functionality we need to deploy our application in production, with a hybrid system with static pages and server-side rendered (SSR) pages. It has support for Typescript and can be deployed without having to configure anything.

SSR Benefits (Next.js)

  • Performance
  • Isomorphic: Works on both server and client (browser)
  • Build: Next.js in the build retrieves the necessary data and ejects HTML with React components.
  • Static export: Compile static files to be able to upload to the server
  • 0 config (No need to configure anything to deploy Next, however it has a very extensible config)
  • Api routes
  • Deploy with Vercel
  • Next head: To modify the head part of the page to improve the SEO
  • Typescript support
  • Environment variables are used in the browser code, not just server code.
  • Fast Refresh: New experience of hot reloading in React components
  • Code splitting: loads chunk corresponding to the page path

Comparison With Gatsby

Gatsby is primarily used for building websites that generate static HTML content and web pages that have a fixed or predictable number of pages and stable content. An example might be an e-commerce site that has only 50 products available for sale.

Posted on

Create a Secure Blog With Gatsby, React, and Netlify

In this tutorial, you’ll learn how to use Gatsby to create a blog app that integrates with the Netlify content management system (CMS) for content. Your app will allow you to author posts in Markdown and add or edit posts from your browser or Git. As a last step, you’ll secure a section of your app with Okta.

First, let’s take a step back. What is Gatsby? Gatsby is a tool for creating static websites with React. With Gatsby, you can pull data from CMSs, Markdown files, APIs, databases, and more. Gatsby uses GraphQL and webpack to combine your data and React code to generate static files for your website. 

Posted on

How to Build а Landing Page With GatsbyJS

GatsbyJS is a JavaScript framework built upon the React framework and integrates Webpack with GraphQL to give you an awesome development experience.

As a beginner, if you are not willing to go through the stress of learning the React.js framework or GraphQL, GatsbyJS is a suitable starting point for you. Moreover, it has detailed documentation to transform you from a beginner to an expert in a short time.

Posted on

Static Site Generators Overview: Gatsby vs. Hugo vs. Jekyll

Websites rule the web, be they static or dynamic. While a lot of sites are dynamic today, the static ones are still quite popular. In fact, there is a rise in the use of static sites.

In this article, you will see a comparison of three of the best static site generators out there, their strengths, weakness and why you should use them.

Posted on

Building a Website With Gatsby and a Headless CMS

If you’re looking to launch a small, static, and speedy website, micro-site, or landing page, you may be considering a static-site generator like Gatsby.

This article will walk you through the process of using Gatsby alongside dotCMS, a Java-based open-source headless CMS, to build a static website that uses API calls to pull content that’s created, stored, and managed in dotCMS, and presented by Gatsby.