Forem: Robbert van Caem

Dynamic routing for Now using NextJS

Robbert van Caem — Tue, 10 Dec 2019 08:09:53 +0000

When I looked into Server Side Rendering (SSR) for React, I quickly encountered NextJS. Getting the hang of it took me some time, but since then it's become a vital part of our digital products. Quickly I came across a very basic requirement: dynamic routing for blog posts.

The objectives

Informing Now about dynamic routes
Fetching a blog post using Next's getInitialProps method
Using a HOC to render a custom error page when data can't be found

1. Informing Now about dynamic routes

At OOGT, we deploy our applications to Now. When you're using NextJS, deploying can be as simple as running now. It also comes with a handy now dev command so that you can locally mimic your Now deployment.

Now needs some knowledge about your application, and you can provide it through a now.json file. This typically looks something like this:

// now.json
{
  "name": "dynamic-routing",
  "version": 2,
  "builds": [{ "src": "next.config.js", "use": "@now/next" }],
  "routes": [
    { "src": "/", "dest": "/index" },
    {
      "src": "/_next/static/(?:[^/]+/pages|chunks|runtime)/.+",
      "headers": { "cache-control": "immutable,max-age=31536000" }
    }
  ]
}

Here, the name is the name of your Now project. The version field is the version of Now deployments you're using. The builds fields holds some configuration about your builder, which we won't go into right now. Finally, the routes field is what we're interested in right now. We'll add a new entry to this.

// now.json
{
  "name": "dynamic-routing",
  "version": 2,
  "builds": [{ "src": "next.config.js", "use": "@now/next" }],
  "routes": [
    { "src": "/", "dest": "/index" },
    { "src": "/(?<slug>[^/]+)", "dest": "/post?slug=$slug" },
    {
      "src": "/_next/static/(?:[^/]+/pages|chunks|runtime)/.+",
      "headers": { "cache-control": "immutable,max-age=31536000" }
    }
  ]
}

What this entry will do is match any URLs after the /, and reroute them to the Post page, where slug is a property of the query object in the request context. So, the URL in the browser will be /some-blog-post-title, but under the hood it renders the post page component with a value of "some-blog-post-title" for the slug property in the query object. Sounds more difficult than it actually is:

// pages/post.js
import React from 'react';

const Post = ({ slug }) => <div>{slug}</div>;

Post.getInitialProps = async ({ query }) => {
  const { slug } = query;

  return {
    slug
  }
}

export default Post;

In the code above, the getInitialProps method provided by NextJS can be used to do some async task like data fetching. It returns an object with the props that can be used by our functional Post component.

Next up, let's use this slug to fetch a blog post!

2. Fetching a blog post

In this example, we'll pretend we have a Wordpress instance running somewhere which contains the blog posts. We're going to use the REST API to fetch a blog post. We'll use axios for the requests since this works both server and client-side.

// data/posts.js
import axios from 'axios';

export const getPost = async (slug) => {
  const response = await axios.get(`https://www.mywordpress.com/wp-json/wp/v2/posts?slug=${slug}`);

  if (!response.data.length) {
    return {
      statusCode: 404,
    };
  }

  return {
    statusCode: 200,
    post: response.data[0],
  };
};

Notice how the returned object contains a statusCode of 404 if the returned response's data object doesn't contain any items. This is an indicator that the blog post does not exist. Otherwise, we'll return a statusCode of 200 and a post property containing the actual data.

Question to self: does the Wordpress REST API actually return a statusCode of 200 for a non-existent post? It would be easier to just use the returned statusCode instead of assuming an empty response means it does not exist. Also, isn't there an easier way of fetching a single post instead of using the first item in the returned array?

Now, we can use the getPost method in our Post component

// pages/post.js
import React from 'react';

import { getPost } from '../data/posts';

const Post = ({ statusCode, post }) => {
  if (statusCode !== 200) {
    return (
      <div>
        <h1>Oops</h1>
        <p>Something has gone wrong</p>
      </div>
    );
  }

  const { title: { rendered: title }, slug } = post;

  return (
    <div>
      <h1>{title}</h1>
      <p>{slug}</p>
    </div>
  );
}

Post.getInitialProps = async (slug) => {
  const { statusCode, post } = await getPost(slug);

  return {
    statusCode,
    post,
  }
}

export default Post;

Now, the above will work just fine for this particular use case. However, imagine we have another page rendering some post that may or may not exist. We could put an if-statement in every page component checking the statusCode, but we can also use a Higher Order Component (HOC) to render an error page whenever some data fetching method returns a statusCode other than 200.

3. Using a HOC to render a custom error page

You can define a custom error page by creating a file _error.js in the pages directory. A simple error page could look something like this:

// pages/_error.js
import React from 'react';

const Error = ({ statusCode }) => {
  let errorMessage = 'An unexpected error occured';

  if (statusCode === 404) {
    errorMessage = 'Page could not be found';
  }

  return (
    <div>
      <h1>Something went wrong</h1>
      <p>{errorMessage}</p>
    </div>
  )
}

export default Error;

To render the error page I found this HOC @tneutkens mentioned which makes it very easy to reuse a custom error page.

// hoc/withError.js
import React from 'react';

import Error from '../pages/_error';

export default Component => class extends React.Component {
  static async getInitialProps(ctx) {
    const props = await Component.getInitialProps(ctx);
    const { statusCode } = props;

    return { statusCode, ...props };
  }

  render() {
    const { statusCode } = this.props;
    if (statusCode && statusCode !== 200) {
      return <Error statusCode={statusCode} {...this.props} />;
    }
    return <Component {...this.props} />;
  }
};

We can now use this for our page like this:

// pages/post.js
import React from 'react';

import withError from '../hoc/withError';
import { getPost } from '../data/posts';

const Post = ({ post }) => {
  const { title: { rendered: title }, slug } = post;

  return (
    <div>
      <h1>{title}</h1>
      <p>{slug}</p>
    </div>
  );
}

Post.getInitialProps = async (slug) => {
  const { statusCode, post } = await getPost(slug);

  return {
    statusCode,
    post,
  }
}

export default withError(Post);

Got questions or feedback?

Do you know of an easier way of doing this? Or do you have any questions? I'm not claiming to be an expert in Now/NextJS whatsoever, but perhaps I can help digging into a problem you might run into.

Don't forget to start following me here, on Medium or on Twitter!

Creating a parallax effect using react-spring

Robbert van Caem — Mon, 09 Dec 2019 18:56:17 +0000

I can hear you think. "Another blog post using react-spring?! This guy..." Well, turns out I'm having quite a good time using react-spring for all kinds of animations/movements. Also, writing this down helps me better understand how it works. So tough luck, here goes nothing.

There are a couple of good libraries out there that can help you achieve a parallax effect quite easily. But the basics for a parallax effect are pretty simple: component X (or a part of it) moves with a different speed horizontally or vertically than component Y, which creates a sense of depth. So achieving the same without a plugin specifically for this effect is actually not that hard.

The objectives

Attaching a scroll listener
Applying the parallax effect by setting the translateY property

1. Attaching a scroll listener

Attaching a scroll listener is actually really easy uing React's useEffect hook. We pass the hook a function that adds an event listener. This function has scroll as it's first argument, and a function handleScroll as second argument. We return a function which removes this event listener. By returning this function we're telling React to do some cleanup when the component is updated or unmounted.

import React, { useEffect, useRef } from 'react';

const Comp = () => {
  const ref = useRef();

  const handleScroll = () => {
    const posY = ref.current.getBoundingClientRect().top;
    const offset = window.pageYOffset - posY;
    console.log(offset);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  });

  return (<div ref={ref}>Contents of your component</div>)
}

export default Comp;

Notice that in the handleScroll method we're calculating the relative Y distance of our component by subtracting the top property of the bounding client rect from the current offset of the window. If you don't do this, the impact of your parallax effect will be based on where (vertically) your component is placed. By using this nifty correction, we'll make sure that our offset has a negative value as long as our component's top is below the viewport's top. When our component's top has passed the viewport's top, the value for offset becomes positive.

Notice, no react-spring has been used yet ;-)

2. Applying the parallax effect

Now that we have the relative Y position of our component, we can start using this to create the parallax effect. We'll use a basic spring for this and define the default offset (which is 0) using the useSpring method. This returns both the interpolated value and an update/set function. We'll use this update/set function in our handleScroll method.

*I've explained a bit more about the useSpring method in one of my previous posts, see this link if you want to know more about it.

import React, { useEffect, useRef } from 'react';
import { useSpring } from 'react-spring';

const Comp = () => {
  const ref = useRef();
  const [{ offset }, set] = useSpring(() => ({ offset: 0 }));

  const handleScroll = () => {
    const posY = ref.current.getBoundingClientRect().top;
    const offset = window.pageYOffset - posY;
    set({ offset });
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  });

  return (<div ref={ref}>Contents of your component</div>)
}

export default Comp;

Right now, we have everything we need to enable our parallax effect. So the next step would be to start moving stuff around. For this example, we'll be using some 'dirty' inline styling, you could use something like styled-components or any other tool for this.

import React, { useEffect, useRef } from 'react';
import { animated, useSpring } from 'react-spring';

// You can use this `calc` method to increase the impact
// of the effect by playing around with the values and units.
const calc = o => `translateY(${o * 0.1}px)`;

const Comp = () => {
  const ref = useRef();
  const [{ offset }, set] = useSpring(() => ({ offset: 0 }));

  const handleScroll = () => {
    const posY = ref.current.getBoundingClientRect().top;
    const offset = window.pageYOffset - posY;
    set({ offset });
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  });

  return (
    <div style={{
      background: '#123456',
      position: 'relative',
      width: '100vw',
      height: '400px',
      ref={ref}
    }}>
      <animated.div style={{
        background: '#654321',
        position: 'absolute',
        width: '100vw',
        height: '100px',
        transform: offset.interpolate(calc)
      }} />
    </div>
  )
}

export default Comp;

And that's it! As you can see all it takes is to define an animated.div with a style object. By interpolating the offset provided through react-spring with a function calc we have full control over the impact of the effect. You could for example change the calc function to manipulate the translateX property. This would make our parallax effect to act horizontally.

Check out the ugly but working CodeSandbox below

Got questions or feedback?

Did you find this useful? Or do you know of a different cool way to achieve a parallax effect? I'm thinking of trying to find a nice way of defining different depths 🤔 If you have any different topics you'd like to hear about, let me know! Next topics I'll cover will probably be:

Setting up and writing your first tests with Jest
How to setup staging/production environments using Now

Don't forget to start following me here, on Medium or on Twitter!