Next.js

and

Bliss.js

Next.js

React

  • View framework by Facebook
  • Can be used on Web and other platforms
  • Microsoft announced support Windows
  • ReactJax if you want to learn more
  • ReactJax JaxNode joint meeting next month

Isomorphic Apps?

Four Types of React

  • React.js => SPA
  • React Native => Native App
  • Gatsby.js => Static HTML
  • Next.js => SPA, Server-Side Rendering

Next.js

  • Created by Guillermo Rauch, creator of socket.io and Zeit.co (Now Vercel)
  • Solves SEO and allows multiple endpoints
  • Includes Link router and getServerSideProps
  • Can create static web sites with Next.js (Can also use Gatsby instead)

SPA

  • Single Page Applications
  • React, Angular, Aurelia Backbone, Ember
  • Great for Web Apps
  • Not necessary for most Web Apps
  • Bad for SEO

Traditional Web Apps

  • Support multiple endpoints
  • PHP, JSP, ASPX, CFM all allow for pages
  • MVC based frameworks allow for routes
  • Express.js uses routes in lew of pages

Best of Both Worlds

  • Compose with React
  • File-system routing
  • Code-splitting, only use imports used on the page
  • Pre-render React views on the server
  • CSR or SSR or SSG

SWC

  • Next generation tooling
  • Rust based compiler
  • Use for compilation and bundling
  • 20 times faster then Babel

Next.js Project

  • package.json
  • /pages
  • /pages/_app.js -> Entry point
  • /pages/api -> Create API for app
  • /static

Getting Started

  • npx create-next-app <yourprojectname>
  • yarn create next-app 
  • or
  • mkdir <yourprojectname>
  • npm init
  • npm install --save next react react-dom
  • modify project.json to have the following scripts 
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Index.js

// pages/index.js
// Notice we do not need to import react or react-dom
export default () => {
    return (<div>Hello JaxNode!</div>);
}

Prerender data

  • componentDidMount will work
  • Use getServerSideProps to get any data before render

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

PreRender Static

  • Use getStaticPaths to pre-render static pages
  • Use getStaticProps to  pre-render static content
export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Links in Next.js

  • import Link from next/link
  • Then use <Link /> component
import Link from 'next/link';

function Home() {
  return (
    <div>
      Click{' '}
      <Link href="/about">
        <a>here</a>
      </Link>{' '}
      to read more
    </div>
  );
}

export default Home;

Link props

  • href: the path inside pages directory + query string.
  • as: the path that will be rendered in the browser URL bar.

  • <Link as={`/p/${show.id}`}
               href={`/post?id=${show.id}`}>

Routes

  • Next based Router
  • Use with onClick events
import Router from 'next/router';

function ReadMore() {
  return (
    <div>
      Click <span onClick={() => Router.push('/about')}>here</span> to read more
    </div>
  );
}

export default ReadMore;

Server Side Rendering (SSR)

  • Next.js allows for SSR
  • Express traditionally uses PUG or HBS
  • Render using React

Styling

  • Styled JSX
  • Inline styles
  • Libraries for LESS and SASS
  • Chakra-UI
  • Tailwind
function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  );
}

export default HelloWorld;

Demo

Blitz.js

Blitz Framework

  • Forked from Next.js
  • Inspired by Ruby on Rails
  • Has scaffolding features that make it easy to prototype new functionality without writing code
  • Think low code
  • Prisma for data source

Installing Blitz

  • Requires Node 12 or higher
  • yarn global add blitz 
  • npm install -g blitz --legacy-peer-deps

Create Blitz App

  • > blitz new myAppName
  • > cd myAppName 
  • > blitz dev

Prisma

  • Framework for working with databases
  • Defaults to sqlite in Next
  • Also works with databases like Postgres and MongoDB
  • Creates migrations so database changes can be deployed at app deployment
model Project {
  id        Int      @default(autoincrement()) @id
  name      String
  tasks     Task[]
}

model Task {
  id          Int      @default(autoincrement()) @id
  name        String
  project     Project  @relation(fields: [projectId], references: [id])
  projectId   Int
}

Prisma Schema Example

Queries and Mutations

  • Query syntax similar to Linq syntax in .NET
  • await db.project.findOne({ where: { id: data.id } })
  • Mutations data manipulation
  • Both queries and mutations stored as reuable functions for components

Demo

Resources

 

Blitz.js

Next.js and Blitz.js

By David Fekke

Made with Slides.com

Next.js and Blitz.js

Intro to Next.js and Blitz.js

  • 586

More from David Fekke