Skip to content

Latest commit

 

History

History

class-41

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Gatsby, next.js, and other JS Frameworks

Overview

React is great, but there are negative implications with regards to SEO (Search Engine Optimization) as well as with so many programming patterns, especially when it comes to page based applications. Gatsby and next.js are 2 frameworks that address both concerns

Class Outline

Learning Objectives

Students will be able to

Describe and Define

  • Server-Side Rendering and SEO
  • The Gatsby Ecosystem
  • The Next.js Ecosystem

Execute

  • Build a simple Blog site with Gatsby
  • Build a simple Blog site with Next.js
  • Tackle new Javascript Frameworks

Notes

Gatsby Basics

Gatsby

  1. Install Gatsby CLI

    npm install -g gatsby-cli

  2. Start a new app, from a starter

    gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

  3. Change directories into site folder

    cd gatsby-site

  4. Start development server

    gatsby develop

If you're using a blog/content starter, Gatsby uses Markdown to structure the content (MDX), and turns that into React Components

https://www.gatsbyjs.com/docs/mdx/

NextJS Basics

NextJS

  1. Create a new app, from their example

    npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

  2. Change directories into site folder

    cd nextjs-blog

  3. Start development server

    npm run dev

Next.JS uses the page metaphor to create websites. Each "Page" of your app or website lives in the pages folder, where it has it's own state, lifecycle.

You can use Redux or any other global state manager at the top level, and you can provide common header/footer or page wrapper components to normalize your site as you please.

Next also allows/encourages you to build esoteric API Routes for use in your application to help you serve your own data quickly within the app.