Forem: Marie Starck

Add Google Analytics to your Next.js application in 5 easy steps

Marie Starck — Mon, 22 Feb 2021 11:12:00 +0000

This tutorial will be covering how to add Google Analytics to your Next.js application. The implementation is straightforward and doesn't require any third-party library.

In 5 easy steps, I will show you how to get Google Analytics set up.

For this tutorial, you will need:

a Next.js project
a Google Analytics account

Step 1: Add your Google Analytics ID to your Next.js .env.local file

First, start with creating a .env.local file where you will place your Google Analytics key.

Tip: Check your .gitignore to make sure that you don't commit this file by accident. .env.local should have already been included by default in your Next.js project but check to make sure.

NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>

Step 2: Inject Google Analytics tracking code into your Next.js application

Now that your key is set, you need to inject and configure Google Analytics' Global site tag (aka gtag) into your browser window.

To access the head element in your Next.js application, you need to create a custom _document.js file into your pages folder.

Tip: Confused about what a custom document file is? Don't hesitate to check out Next.js' documentation on custom document.

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Step 3: Custom functions to track pageviews and events

Key set: check! Global site tag configured: check!

Let's move on to the tracking piece of Google Analytics. In order to correctly track your user's behaviours, you will need to log page views and optionally, specific events triggered in your application.

To do so, I suggest you create a lib folder where you will put all your code related to third-party libraries and another folder inside called ga for Google Analytics.

Inside your lib/ga folder, create an index.js with two functions: one to log pageviews and the other events.

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  })
}

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params)
}

Step 4: Log pageviews in your Next.js app

The simplest way to log pageviews in your Next.js app is to subscribe to your router and listen for the routeChangeComplete event.

To do so, go into your _app.js file and with useEffect, check for new events happening with your router. There are many types of events but we only care when users navigate to a new page successfully (routeChangeComplete).

Note: If you are interested, there are many router events types in Next.js. You may, for example, be interested in logging when an error occurs (routeChangeError).

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as ga from '../lib/ga'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

Step 5: Log specific events in your Next.js app

Now that our page views are tracked, you may be interested in logging specific events in your application. Here is a list of Google Analytics Default events.

This is an example of how to log search terms entered by users:

import { useState } from 'react'

import * as ga from '../lib/ga'

export default function Home() {
  const [query, setQuery] = useState("");

  const search = () => {
    ga.event({
      action: "search",
      params : {
        search_term: query
      }
    })
  }

  return (
    <div>
        <div>
          <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
        </div>
        <div>
            <button onClick={() => search()}>Search</button>
        </div>
    </div>
  )
}

Next steps:

Add your Google Analytics ID to your environment variables in production

Once deployed to production, don't forget to add your Google Analytics secret key to your environment variables.

In Vercel, you can do so by going to your project, then Settings and finally Environments Variables.

Check that Google Analytics is connected

It takes between 24-48 hrs for data to show up in Google Analytics. However, you can check if your tag is working by looking at the Realtime view.

Test and Debug your pageviews and events with Google Analytics Debugger

If you don't see any data in Realtime, another way to test your Google Analytics tag is with the Chrome extension Google Analytics Debugger.

Once installed and turned on, it prints Google Analytics messages to your console making it easy to see what happens behind the scene.

Et voilà!

You now have a Next.js application with Google Analytics set up and ready to start tracking.

If you liked the article, you can follow me on Twitter.

How to localize your Next.js application with next-translate

Marie Starck — Tue, 09 Feb 2021 15:54:42 +0000

To add internationalization to a web app, you need to handle two main tasks: managing translations and maintaining separate URLs.

Questions related to your URLs often include:

How are locales split up? Will you use a sub-path (/fr vs /en) or domain locale strategy (domain.com vs domain.fr)?
If your user change locale, how do you redirect them to the correct URL?
Can you detect the user's preferred locale and redirect them accordingly?

In October 2020, Next.js released a new version of its framework. Among all the new and shiny features, the one which interested me the most was Internationalized Routing. This feature added built-in support for routing in multilingual applications along with language detection. This however leaves you with the last component: managing translations.

Enter next-translate. I have chosen this particular translation library for many reasons. On top of being very easy to use and configure, I love next-translate because it works very well with Next.s automatic page optimization. Meaning, my prerendered static pages can stay this way and next-translate will handle the translation. Woo!!

Now that the introductions are done, let's move on to the nitty gritty.

Step 1: Setting up locale strategy in next.config.js

As mentioned before, there are two ways you can go about locale strategy: sub-path (/fr, /en, /en-US, ...) or domain routing (.com, .fr, .ca).

Note: If you are not sure which to choose, consult Google's documentation on using locale-specific URLs detailing the pros and cons for each.

For this tutorial, you will be going down the sub-path route (pun intended). To do so, you need to update your next.config.js and add your locales.

In this example, the resulting URLs will be / for anglophones and /fr for francophones.

module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
}

Step 2: Set up Internationalized Routing in your Next.js pages

Now that your locale strategy is defined, let's move on to your pages. How does Next.js handle internationalization with its static and dynamic pages?

Static pages

Luckily for us, Next.js generates separate versions for each locale. At build time, Next.js will therefore spit out two index.js pages, one in english and one in french.

Dynamic pages

However, your dynamic pages need a little bit of love. Say, for example, I have a Next.js application for my blog. I have two pages: index.js listing all the posts and [slug].js for individual post.

Because I want my pages to load quickly, I want them statically generated. This means that, at built time, separate HTML files (post-1.html, post-2.html, ...) are generated for all my blog posts.

In multilingual applications, not only would I want all these pages generated, but I would also want a version for each locale. The end result will look something like this:

.next/ <- contains all the files generated at build time
│
└───en/
|       post-1.html
|       post-2.html
└───fr/
    post-1.html
        post-2.html

Therefore, in your application, not only do you need to specify all the different paths (meaning /post-1, /post-2, ...), but also the locales.

What it would look like with my blog example:

export async function getStaticPaths({ locales }) {
  const paths = []

  locales.forEach((locale, i) => {
    posts.forEach((post, i) => {
      paths.push({ params: { slug: post.id }, locale })
    });
  });

  return { paths, fallback: false }
}

(Optional) Retrieve the current locale in your Next.js app

You can see what the current locale is at any point thanks to the router.

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter()
  const { locale } = router

  return (
    <div className="center-container">
      <main className="main">
        // ...

        <section>
          <div>Current locale: {locale}</div>
        </section>

       // ...
      </main>
    </div>
  )
}

Step 3: Changing locale and redirecting in your Next.js app

I love that Next.js made it really simple to redirect when changing locale. All you have to do is specify the locale in your Link component. It's pretty straightforward which I love! <3

import Link from 'next/link';

export default function Home() {
  return (
    <div className="center-container">
       // ...
          <div>
            <Link href="/" locale="en">
              <a>Change to english</a>
            </Link>
          </div>
          <div>
            <Link href="/" locale="fr">
              <a>Change to french</a>
            </Link>
          </div>
      // ..
    </div>
  )
}

Step 4: Install next-translate

Now that internationalized routing is implemented, we can move on to the last part of this tutorial: translations.

To start with, let's add the library.

npm install next-translate

# or

yarn add next-translate

Step 5: Update next.config.js

Then, update your next.config.js to use next-translate.

const nextTranslate = require('next-translate')

module.exports = nextTranslate()

Step 6: Set up your locales and namespaces

The last part of your configuration is to create an i18n.json and add your locales. One feature I really is being able to split your translations into separate files. This allows you to have page-specific translations.

For the sake of this tutorial however, I will only have one namespace called common which will be applied to my entire app ("*").

{
  "locales": ["en", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"]
  }
}

Step 7: Creating translations files

For your next step, you then create a locales folder where you will add separate folders for all your locales. In each folder, you need to create a json file for all your namespaces.

Since I only have one namespace (common), I will go ahead and create one json file called common.json for each locale folder.

This is what I have in the end:

locales/ 
│
└───en/
│       common.json
└───fr/
        common.json

Inside your json files, add all your translations.

{
  "homepage_title": "Blog in Next.js",
  "homepage_description": "This example shows a multilingual blog built in Next.js with next-translate"
}

Step 8: Displaying translated content

Finally, you can display your translated text by getting the t function from useTranslation. By passing the translation key, you can then retrieve the translated value and display it.

import useTranslation from 'next-translate/useTranslation'

export default function Home() {
  const { t } = useTranslation('common')

  return (
    <div className="center-container">
      <main className="main">
        <h1 className="title">
          {t('homepage_title')}
        </h1>

        <p className="description">
          {t('homepage_description')}
        </p>
      </main>
    </div>
  )
}

Et voilà!

Your application is now officially multilingual. Along with displaying translated content, your app also handles internationalized routing thanks to Next.js built-in support.

If you liked the article, you can follow me on Twitter.

A Beginner's Guide to Dynamic Routing in Next.js

Marie Starck — Wed, 09 Dec 2020 14:46:29 +0000

This week, the topic of this tutorial is dynamic routing in Next.js. More precisely, we will go over:

How to create dynamic routes
How to navigate between pages with the Link component
How to retrieve the query parameters (like ids)

How to create dynamic routes in Next.js

As mentioned in the tutorial on static routing, Next.js defines routes based on the concept of pages.

What does that mean? Every Next.js project comes with a pages folder. The structure of the pages folder determines the structure of your routes and every file inside that folder maps to a route in your application.

Essentially, every time you want to create a route, you need to add a file in the pages folder. Keep in mind that the pages folder itself represents your root url (meaning /).

For static routing, you can create a new route by adding a index.js or a named file like about.js.

pages/index.js maps to /

pages/about.js maps to /about

Tip: For more info on how to create static routes (including nested routes), read my tutorial on static routing in Next.js.

But how does it work for dynamic routes? Say I wanted to create a blog, how would I add a route such as myblog.com/posts/:id?

Next.js handles dynamic routes by supporting brackets around parameters (e.g [id]) as a filename. Going back to my blog example, I would therefore create a [id].js file inside my posts folder.

As a result, /pages/posts/[id].js would map to /posts/[id] where id is the unique id of your post.

Dynamic Nested Routes in Next.js

Can I create dynamic nested routes? Say I wanted a page for comments related to a particular post, could I have a url such as /posts/[id]/[commentId]?

The answer is Yes!

For nested routes, you have to create a folder instead of a file. The syntax stays the same meaning that your folder would be called [id]. You can then add new routes inside. Here is the end result:

pages/
│   index.js -> url: /    
│
└───posts/
     |  index.js  -> url: /posts
     |
     └─── [id]/
             index.js       -> url: /posts/[id]
             commentId.js   -> url: /posts/[id]/[commentId]

Now that all our routes are set up, let's explore how to navigate between the different pages.

How to navigate to dynamic routes in Next.js

Next.js offers a component called Link that allows for navigation between pages. This component accepts an href and wraps around a piece of code (say an anchor) to navigate to a page. Let's try it.

Try #1:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      <div>
        <Link href="/posts/1">
          <a>Post #1</a>
        </Link>
      </div>
    </div>
  );
}

Straightforward, but hard-coded links are not very practical. I am going to create a separate posts object and use that to create my url.

Try #2:

import Link from "next/link";

const posts = [
  {
    id: 1,
    title: "Post #1"
  },
  {
    id: 2,
    title: "Post #2"
  }
];
export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      {posts.map((post) => (
        <div key={`post-${post.id}`}>
          <Link href={`/posts/${encodeURIComponent(post.id)}`}>
            <a>{post.title}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

Better! But what if I update my route later? I will have to go through all my code and update all the links.

Try #3:

import Link from "next/link";

const ROUTE_POST_ID = "posts/[id]";
const posts = [
  {
    id: 1,
    title: "Post #1"
  },
  {
    id: 2,
    title: "Post #2"
  }
];
export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      {posts.map((post) => (
        <div key={`post-${post.id}`}>
          <Link
            href={{
              pathname: ROUTE_POST_ID,
              query: { id: post.id }
            }}
          >
            <a>{post.title}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

What changed? Instead of an hard-coded url, the Link component can also accept an object for href.

This object contains two parameters pathname and query. The pathname is the route we want to navigate to (in our particular case, /posts/[id]) and the query which will contain all the data necessary for our dynamic route (like id).

The Link component takes those two and automatically formats it into the right url. That's much better!

Access query parameters in your page

Can I access the parameters in my new page? In other words, when I get to /posts/[id], can I get the id part?

You can get all the information you need and more from the router itself. Simply, import useRouter and get the router object. The same way, we pass a query object for navigating query : { id: post.id }, we can retrieve it in our new page.

import { useRouter } from "next/router";

export default function PostPage() {
  const router = useRouter();
  return <div>Post #{router.query.id}</div>;
}

Here is the end result:

There you go! I created a sandbox if you would like to see the complete code and play around with it a bit: Next.js Dynamic Routing CodeSandbox.

If you liked the article, you can follow me on Twitter.

A Beginner's Guide to Static Routing in Next.js

Marie Starck — Tue, 01 Dec 2020 16:13:48 +0000

Routing in an application is the ability to change urls and go from one page to another. It's a major component in any web application. Thankfully, Next.js comes with a built-in logic concerning routing.

This tutorial will be focusing on static routing and cover:

How to create routes in Next.js
- Index Routes (such as /)
- Static Routes (/about)
- Nested Static Routes (/products/new_arrivals)
How to navigate between pages and pass query parameters with:
- Next.js Link Component
- useRouter Hook
- withRouter HOC

To better illustrate this concept, I will be using the example of an online store. This store will have three pages: Home, About and New Arrivals. We will be going over the different ways how to implement routing between them. Here is the end result!

(Optional) Starter project

There is the code for the online store: https://github.com/mariesta/next-routing-store-project. This repository has two branches: main and final. The main branch has all the pages, components and styling but no routing. The final branch has all this + routing.

This project is a sample online store and includes three pages: Home, About Us and New Arrivals.

As a result, we will need three different URLs:
/ for my homepage
/about for my about page
/products/new_arrivals for the page displaying the new arrivals

How to create different routes in Next.js

Next.js uses the concept of pages to create routes. Every new Next.js project comes with a pages folder in the root directory. The structure of the pages folder determines the structure of your routes and every file inside that folder maps to a route in your application.

Essentially, every time you want to create a route, you need to add a file in the pages folder.

There are three ways to add static routes in Next.js depending on your needs.

1. Next.js Index Routes

Index routes are the root of a directory. By adding a index.js file to a folder, you create a new route. The pages folder itself maps to your base URL (meaning /).

Therefore, for my homepage, I will create an index.js file inside the pages folder.

pages/index.js would then map to /.

2. Next.js Static Routes

You can also create routes by naming the file. For my about page, I want the url /about. To do so, I have created a file called about.js that I will put in pages.

This way, pages/about.js maps to /about.

3. Next.js Nested Routes

Next.js also supports nested routes. For my page with my new arrivals, I want my URL to look like /products/new_arrivals. I will create a product folder and then add new_arrivals.js inside.

pages/products/new_arrivals.js maps to /products/new_arrivals

Index routes can also be used for nested routes. Say I wanted a page for listing all my products, I would add a index.js file inside my products folder.

pages/products/index.js maps to /products

I now have all my routes mapped out and it looks like this:

pages/
│   index.js
│   about.js    
│
└───products/
        new_arrivals.js

Note: Folder vs file? If you are wondering which to choose, ask yourself: "Will I have child routes?".

I am not planning to create any child routes under /about, therefore I am using a file for this page.

Products however could have many children routes (/products, /products/new_arrivals, /products/[id], ...). All these children routes will need separate js files. Hence, the products folder.

Now that we have all the pages set up, it's time to implement routing between them.

Navigate with the Next.js Link Component

The simplest way to navigate between pages is with Next.js Link Component. This component is very straightforward. Like an anchor tag, it accepts an href as a props.

Here is the Header Component for my store. I want to redirect users to the homepage when clicking on the logo. I can do so by adding a component around my anchor.

import Link from 'next/link'

export default function Header() {
  return(
    <header className="store-header py-3">
      <div className="row flex-nowrap justify-content-between align-items-center">
        <div className="col-12 text-center">
          <Link href="/">
            <a className="store-header-logo text-dark">My Store</a>
          </Link>
        </div>
      </div>
    </header>
  )
}

It's the same for nested routes. Take my navbar where I have two links to the New Arrivals and the About pages. Here is the component with routing implemented.

import Link from 'next/link'

export default function Nav() {
  return(
    <div className="nav-scroller py-1 mb-2">
      <nav className="nav d-flex">
        <Link href="/products/new_arrivals">
          <a className="p-2 text-muted">New Arrivals</a>
        </Link>
        <Link href="/about">
          <a className="p-2 text-muted">About us</a>
        </Link>
      </nav>
    </div>
  )
}

Access your Next.js router and navigate with the useRouter hook

Another way to implement routing between pages is to access the router and push a new page. Next.js provides us a useRouter hook to accomplish this.

Going back to our Header Component, here is another way to link to our homepage:

import { useRouter } from 'next/router'

export default function Header() {
  const router = useRouter()
  const navigateHome = () => router.push('/')

  return(
    <header className="store-header py-3">
      <div className="row flex-nowrap justify-content-between align-items-center">
        <div className="col-12 text-center">
          <a className="store-header-logo text-dark" onClick={navigateHome}>My Store</a>
        </div>
      </div>
    </header>
  )
}

With the useRouter hook, you can access the router object. The latter comes with many useful functions including push(), back(), reload() and more.

Access your Next.js router and navigate with the HOC withRouter

The last option is, of course, with a HOC for classes. For this one, Next.js offers withRouter to access the router through props.

import { withRouter } from 'next/router'

function Header({router}) {
  const navigateHome = () => router.push('/')

  return(
    <header className="store-header py-3">
      <div className="row flex-nowrap justify-content-between align-items-center">
        <div className="col-12 text-center">
          <a className="store-header-logo text-dark" onClick={navigateHome}>My Store</a>
        </div>
      </div>
    </header>
  )
}

export default withRouter(Header)

Passing query parameters

The ability to pass query when navigating between pages is an important one. Next.js also covers this use case.

In these examples, I will be using my Header and Nav components to pass the query ?sort=asc to my url. This will result in urls like http://localhost:3000/products/new_arrivals?sort=asc

Query Parameters with Link

Next.js Link Component also accepts URL objects in href. The URL object must be composed of pathname (the name of the page we are trying to access) and query (the parameters you want to pass).

import Link from 'next/link'

export default function Nav() {
  return(
    <div className="nav-scroller py-1 mb-2">
      <nav className="nav d-flex">
        <Link href={{
          pathname: "/products/new_arrivals",
          query: { sort: "asc" }
        }}>
          <a className="p-2 text-muted">New Arrivals</a>
        </Link>
        <Link href="/about">
          <a className="p-2 text-muted">About us</a>
        </Link>
      </nav>
    </div>
  )
}

Query Parameters with useRouter

The same logic is used with the useRouter hook. Instead of router.push('/'), we replace it with router.push({ pathname: "/", query: { sort: "asc"}).

import { useRouter } from 'next/router'

export default function Nav() {
  const router = useRouter();

  const navigate = (href) => router.push({
    pathname: href,
    query: { sort: "asc" },
  })

  return(
    <div className="nav-scroller py-1 mb-2">
      <nav className="nav d-flex">
        <a className="p-2 text-muted" onClick={() => navigate('/products/new_arrivals')}>New Arrivals</a>
        <a className="p-2 text-muted" onClick={() => navigate('/about')}>About us</a>
      </nav>
    </div>
  )
}

Query Parameters with withRouter

And finally, with the HOC withRouter. Again, simply pass the object to router.push().

import { withRouter } from 'next/router'

function Header({router}) {
  const navigateHome = () => router.push({
    pathname: "/",
    query: { sort: "asc" },
  })

  return(
    <header className="store-header py-3">
      <div className="row flex-nowrap justify-content-between align-items-center">
        <div className="col-12 text-center">
          <a className="store-header-logo text-dark" onClick={navigateHome}>My Store</a>
        </div>
      </div>
    </header>
  )
}

export default withRouter(Header)

There you go! We have now implemented static routing in our application. And if you would like to deploy your brand new web app, what about doing it on Heroku? Here is a quick tutorial for deploying your Next.js app to Heroku in 5 minutes.

If you liked the article, you can follow me on Twitter.

Deploy your Next.js app to Heroku in 5 minutes

Marie Starck — Sun, 15 Nov 2020 14:15:55 +0000

When I became a freelancer, I was afraid of deployment. As a startup employee, I always had the luxury of my coworkers nearby if anything went wrong. It was a luxury I only appreciated once it was no longer an option as these days I mostly work by myself. But that move from employee to freelancer also made me realize something else:

While deployment may seen frightening, it doesn't have to be.

As a matter of fact, this tutorial will prove how easily and quickly you can get your Next.js application deployed to Heroku.

Prerequisites for this tutorial:

Git
a Heroku account (if you don't have one, create an account here)
Heroku CLI (if you don't have it set up, head here first)
Node.js installed (at the time of writing, Next.js requires Node.js 10.13 or later. For more info, read Nexts.js - Getting Started)

(Optional) Create a Next.js app if you don't already have one

I am assuming that if you are reading this post, you most likely have one running on your localhost. But, to be 100% sure, I will show you how to get one set up.

npx create-next-app

# OR

yarn create next-app

Go through the creation setup and when it is done, you can try starting the development server.

1. Update your package.json

Heroku runs their applications in Linux containers called dynos. When Heroku runs a web dyno, it sets a variable called $PORT. To receive incoming requests, you need to bind to this port.

To do so, go to your root-level package.json and update your start script:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  }

Tip: For more information on the different types of dynos and how they work, here is the Heroku's documentation.

2. Commit your code to git

First, we will use git to push our code to Heroku. That's why you should transform your app into a git repo if that isn't already the case.

git init
git add .
git commit -m "Initial commit"

3. Create a Heroku app

You need to be logged into the Heroku CLI to do this (you can do so with the command heroku login). Once you are, you can create your app:

heroku create $APP_NAME

4. Push your code the the Heroku app

With your code committed and your Heroku app created, you are now ready to push this code onto your app.

git push heroku master

Tip: If you are on a branch other than master (say main or production), you can push your code like this:

git push heroku [your branch name]:master

Once deployment done, you can access your app at https://[APP_NAME].herokuapp.com/.

Et voilà!

Possible Errors

1) Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

You have committed your code, pushed it to your Heroku app, opened up a tab to view your new shiny app and .... nothing loads. Worse, you get a message that an error occurred.
First, do this command to see your logs:

heroku logs --tail

And, bam!

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

Do not panic. What most likely happened is that you forgot to update your package.json. Go back to that file and make sure that your start script has the -p $PORT required.

2) No build cache found. Please configure build caching for faster rebuilds

You might see this when you push your code to Heroku and your app is building. It's not an error but a warning. It won't hurt your project but will result in slower builds. For more information, you can read the Next.js documentation on the subject.

To fix this, go to your package.json and add this:

"cacheDirectories": [".next/cache"]

Tips and tricks after deploying

Once you are done deploying, here are a list of things you might want to set up for a smooth running of your application.

Set your environment variables in Heroku

You have two ways at your disposal to set your environment variables in Heroku.

1) through the terminal

You can first see all your variables:

heroku config

#If you just created your app, the result will probably be blank

Set an new variable. This will restart your application too.

heroku config:set FOO=bar

Remove a variable:

heroku config:unset FOO

2) Through the dashboard

Another way to add/edit/remove environment variables is through the dashboard.

Go to https://dashboard.heroku.com/apps and select your app. Navigate to Settings. Under Config Vars, you will be able to make all the changes you need.

Automated deployment

If you have a Github account, you might be interested in Heroku's automated deployment feature. This will mean that every time you push your changes to a particular branch, say production, those changes are automatically push to your Heroku application.

To do so, go to your dashboard and select your app. Under the Deploy tab, look for Deployment method.

From there, you can connect your Github account. Once that is done, you can select a repository and a branch.

If you liked the article, you can follow me on Twitter.

Improve your React app performance with next-gen images

Marie Starck — Sat, 05 Sep 2020 18:25:40 +0000

It is no secret today that an app performance is an important component in the user experience. According to a study conducted by Google, 53% of mobile users will leave a page if it takes longer than 3 seconds to load.

After finally shipping out my personal project, City Secrets, I decided to run some Lighthouse Test and improve the performance.

Note: If you are unfamiliar with Lighthouse, it's an open source tool that allows you to run audits on your web pages not only for performance but also accessibility, SEO, progressive web apps and more. The best way I found to run it is from the Chrome DevTools.

The problem: Images loading too slowly

City Secrets' homepage contains one header image and 4 smaller ones. Thanks to the Lighthouse tool, I discovered I was spending far too much time loading them. This in turn impacted the time it took for the app to be interactive (and as a result, useful for the user). Yikes!

Thankfully, the Lighthouse report also includes ways to improve your score.

But, what are next-gen formats?

Next-gen formats include WebP, JPEG 2000 and JPEG XR. Those image formats possess superior compression (making images even lighter than JPEG and PNG) without losing in quality.

But how big of a difference is it? Is it worth putting any effort into it?

Well, my header image went from 357 kB in JPEG to 184 kB in WebP! That's 51% smaller!

WebP vs JPEG 2000 vs JPEG XR

The only downside to next-gen formats is that none of them have universal browser compatibility today.

WebP

While WebP is making great progress in being recognized by browsers, there are still a few that don't recognize it. Like Safari, though the next release should, and Internet Explorer (a surprise to everyone, I imagine).

JPEG 2000

Currently only supported by Safari and iOS Safari.

JPEG XR

Developed by Microsoft in 2009 and as a result, supported by Internet Explorer.

With these three formats, we now have universal browser compatibility.

Convert JPEG/PNG images to WebP/JPEG 2000/JPEG XR

Here is a tool to convert an image to all three formats: https://www.aconvert.com/image/

For WebP, I also like this one: https://squoosh.app/

Next-gen images in HTML with the picture tag

Now that we have the same images in a whole bunch of formats, what to do? Well, thankfully, HTML5 offers a handy tag called picture. This tag supports multiples sources and gives developers more flexibility in specifying images sources.

For examples, this would be an image displayed on the homepage:

<picture>
   <source srcset="assets/img/bordeaux.webp"
type="image/webp">
   <source srcset="assets/img/bordeaux.jxr" type="image/jxr">
   <source srcset="assets/img/bordeaux.jp2" type="image/jp2">
   <source srcset="assets/img/bordeaux.jpg" type="image/jpeg">
   <img src="assets/img/bordeaux.jpg" alt="Photo of Bordeaux" /> 
</picture>

This way, all our formats are included and the different browsers can process the one they support.

Create an Image component with React

This is very nice but a big chunky. Let's continue by abstracting this logic into a component.

import React from 'react';

const ImgNextGen = ({
  srcWebp,
  srcJrx,
  srcJp2,
  fallback,
  alt,
  ...props

}) => {
  return (
    <picture>
       <source srcset={srcWebp} type="image/webp" />
       <source srcset={srcJrx} type="image/jxr" />
       <source srcset={srcJp2} type="image/jp2" />
       <source srcset={fallback} type="image/jpeg" />
       <img src={fallback} alt={alt} {...props} />
    </picture>
  );
};

export default ImgNextGen;

And if we wanted to use it:

<ImgNextGen
    srcWebp="assets/img/bordeaux.webp"
    srcJrx="assets/img/bordeaux.jrx"
    srcJp2="assets/img/bordeaux.jp2"
    fallback="assets/img/bordeaux.jpg"
    alt="Photo of Bordeaux"
/>

Next-gen in CSS

What about background-images for example? Checking for WebP/JPEG 2000/JPEG XR compatibility is a tiny bit more tricky but certainly not impossible.

To achieve it, I recommend Modernizr. It's a free and handy tool that allows you to check what HTML/CSS/Javascript features the browser supports. It works by adding a class to the html tag . In the case of WebP for example, modernizr would add .webp or .no-webp depending on the user's browser which allows you to then use the right image.

Here is how it works:

Head to Modernizr
Go to Download
Check three features: Webp, JPEG 2000, JPEG XR
Click Build

You then have a few choices. You can download the js file and import it into your React project.

Personally, I decided to click on "Open build on codepen.io" and then copy the javascript portion. Next, open your public/index.html file in your React project and paste the javascript into the head (Don't forget the <script> tag).

It should look similar to this:

<script>
/*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-jpeg2000-jpegxr-webp !*/
!function(A,n,e){function o(A,n){return typeof A===n}function a(){var A,n,e,a,t,i,r;for(var l in s)if(s.hasOwnProperty(l)){if(A=[],n=s[l],n.name&&
...
</script>

As I mentioned, if you find it too long, simply download the js file and import it into your head.

Either way, depending on your user's browser, the correct class is added to your html. This allows us to structure our CSS this way:

.home-bg {
    background-image: url('assets/img/home-header.jpg')  /* default */
}  

.webp .home-bg {
    background-image: url(assets/img/home-header.webp')
}

.jpeg2000 .home-bg {
   background-image: url('assets/img/home-header.jp2')
}

.jpegxr .home-bg {
   background-image: url('assets/img/home-header.jxr')
}

That's it! I hope it was helpful. Don't hesitate to contact me if you have any questions.

Here are some resources mentioned in this tutorial (in case, you missed them):
Lighthouse documentation on next-gen formats: https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=devtools

To check browser compatibility of your format: https://caniuse.com/

To convert images to WebP/JPEG 2000/ JPEG XR: https://www.aconvert.com/image/

Modernizr: https://modernizr.com/