DEV Community: Hunter Becton

Middleware in Next.js: Moving from Express

Hunter Becton — Mon, 15 Feb 2021 19:01:59 +0000

I'm currently moving my site to Next.js from a site that used an Express backend. I'm a huge fan of Express, and one of the things I love about Express is how simple it is to implement middleware.

Middleware is a function that you can attach to routes in order for it to run before the route. In other words, it runs in "the middle." This is useful for things like checking if a user is authenticated or has the proper roles to access a route.

These are features you would want on multiple routes, and middleware makes it easy to write the function in one place and reuse it across multiple routes (Don't Repeat Yourself). But what about Next.js–how do you implement middleware?

Well, you could create a custom Express server to work with Next.js, but you're losing some of the benefits of creating your API the way Next.js intended.

Instead, you can watch how I implement middleware in my Next.js application in the video below, or for those that rather read I have a written explanation below the video–enjoy! 😊

Code: https://github.com/hunterbecton/next-js-middleware

Before: My Express Protect Middleware

In Express I have all my routes and middleware associated with authentication inside an authController.js file. One of those middleware functions is the protect function, which you can see in the code below:

This protect function would check to see if the req had cookies and if the st_accessToken cookie was present. If so, it would attach the token to the token variable defined at the top of the function.

If no token was present my application would return an error asking the user to log in, so the user would never reach the final route. If a token was present the function would then proceed to run some code in a try / catch block.

Inside the try block the token would be decoded using the jwt.verify method from the jsonwebtoken package. This method is passed the token and my application's JWT secret. Once that's decoded my application has access to the user's unique ID on decoded.id. This user ID is then used to make a call with Mongoose to my MongoDB database: const currentUser = await User.findById(decoded.id);

If no user if found the application will return an error, otherwise the function will attach a user object on req based on the currentUser that came back from MongoDB. Last, unless an error is caught in the catch block, the function calls next(), which tells Express to move to the next route handler or middleware.

Now routes or middleware further down the chain will have access to the user object and can use it however they want. For example, my routes for Stripe will now be able to read the Stripe Customer ID from the user object that is attached to req.user.

This middleware is implemented in Express when I create my routes in the userRoutes.js file:

Now: My Next.js withProtect Middleware

In Next.js you can create your routes in a folder called api, which needs to be inside the pages folder. Then, inside your api folder you can create all your route handlers, nesting them inside other folders based on how you want your API to be organized. Next.js will handle creating the routes for you, so there's no need to define them like you would in Express.

For example, a logout.js handler inside pages > api > users > logout can be accessed in development from localhost:3000/api/users/logout. Pretty neat, right?

However, because Next.js handles the routing for us, we can't just pass a middleware before the route is called when we define routes ourselves in Express. So now let's look at the withProtect middleware code:

Look familiar? That's because it's almost identical to the protect middleware in Express! However, there are some important things to point out. To make them easier to see, check out this code example below where I remove some of the identical code:

You can now see how this withProtect middleware takes the handler in as an argument, then returns a function of (req, res). This essentially takes over the handler for now, before it later passes it back into the original handler when handler(req,res) is returned.

Now with the withProtect middleware complete, it's time to implement it inside the logout route. Refer to the following code:

Inside the logout handler you can see that it has access to req.user, which is passed on by the withProtect middleware.

So how does the logout handler get the access? Well, if you look at the bottom of the code you will see that I wrapped the exported handler with the withProtect middleware–identical to how you would do higher order components in React: export default withProtect(handler);.

By doing this, the withProtect middleware will run before the logout handler and give the logout handler the user object on req.user, unless there is an error and the middleware will return an error.

Chaining Multiple Middlewares in Next.js

What happens if you want to add multiple middleware on a handler? Simple, you just nest it inside the other middlewares!

For example, check out this withRoles middleware:

This middleware takes two arguments: the original handler function and a string of possible roles that can access the route.

Users are assigned the role of user in my database by default when they're created. This is important because there are some routes, like deleting a user, that I only want users with the role of admin to access.

This withRoles middleware gets access to the user on req.user because it's nested inside the withProtect middleware. Although it doesn't make much sense to only allow admins to logout, check out this simplified example of the logout handler:

First, the withProtect middleware runs, either attaching the user object on req.user or returning an error. Then the withRoles middleware checks to see if the req.user.role matches 'admin'. If it does, the logout handler is then called. Otherwise, the middleware returns a response notifying the user that they do not have the proper permissions.

Nesting middleware like this can look a little weird compared to how you would implement it in Express, but once you get the hang of it the implementation in Next.js is simple.

Found this helpful? Subscribe to my YouTube channel

React Tutorial: Change State with React Hooks and Mouse Events

Hunter Becton — Wed, 06 Nov 2019 13:35:29 +0000

Introduction

I came across a really cool and useful hover effect on Colors & Fonts that allows you to compare font pairings with different colors:

This interaction inspired me to tackle my own version in React and share it with the community. In this tutorial you will use the useState React Hook and Emotion to create the following:

Here's a 9-minute, step-by-step video below that you can watch if you'd prefer to follow along that way. If you enjoy it, be sure to subscribe! Otherwise, each step is outlined below the video. Let's dive in!

Get Started

Skip Building the Card Component

The main focus of this tutorial is about how to change state with React Hooks and mouse events, so to save you some time I went ahead and created a Codesandbox project that you can fork with the basic Card component completed.

Let's Talk About Emotion(s)

In this tutorial we'll be using Emotion, a CSS in JS framework. If you've never heard of a CSS in JS framework, there's a couple of key benefits, including:

Add, change and delete CSS without any unexpected consequences and avoid dead code.
Never go on a hunt for CSS affecting your components ever again.
Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.
Send only the critical CSS to the user for a rapid first paint.
Simply style your components with a global theme or based on different states.

The last benefit in the above list is what we're going to focus on today because we're going to use the state from our useState React Hooks to dynamically change the colors of the fonts and background.

So that's the intro, let's get to coding!

Create State Using the `useState` React Hook

We first need to import useState from React at the top of the Card component. After it's imported we'll use array destructuring to create the state variable and the function to update the state. You can name these two values anything you want, but a good practice is to give your state variable a descriptive name like background and follow the function naming convention with set + variable name–so setBackground in this case.

Next we declare useState(), passing a default value in parenthesis. The default value for background will be a hex code for the background color, which is an off-white value of #fdfdfd.

We also need to create a state value and function for the font color, so create another instance of useState with a state variable of font and a function of setFont. The default value for this state variable is the following hex code: #424246.

Now with state values initiated in our component we can pass them into the CSS, replacing the hex code values with the default state values. We're not covering much of Emotion in this tutorial, but do take note that I'm storing the CSS in constants and passing the constants into the className below. You could pass the CSS directly into the className, but breaking them into constants makes it a little easier to grok.

By now the Card component should look like this:

Note in the above code that I used div tags for the 3 buttons instead of button tags like I did in the video.

Create a Method to Handle the State Functions

Right below where we declared the state values and functions, create a new arrow function called setStyle that takes two parameters: background and font. These parameters will be hex code string values that we will pass into our state functions as arguments in order to update the state.

In order to update the state we need to call the two state functions, passing the background parameter into the setBackground function and the font parameter into the setFont function.

Your new setStyle method should look like this:

Add `onMouseEnter` and `onMouseOut` Events to the Buttons

Let's bring this all together by writing onMouseEnter and onMouseOut events in each button, passing in the hex code values we want to set. Also note that it's important to write these as arrow functions or the code will execute when the component in rendered.

And that's it! Now your Card component should look like this:

Continue Learning

If you made it this far, thank you! You can keep up with all my content by subscribing to the Skillthrive Youtube channel. I have a number of courses on there that you can start watching for free, including a 3.5 hour course on how to build a blog from scratch using React, Gatsby, and Contentful.

Would you buy a design system with React components?

Hunter Becton — Sun, 20 Oct 2019 23:22:26 +0000

I'm putting together a design system with 100+ (and growing) components in Figma and React. Considering it's well designed and coded, would designers and developers buy it?

If so, what would you need to see to help you make the purchase?

If not, why?

Thank you for your input.

Code a Skewed Card Design Using CSS 2D Transforms

Hunter Becton — Sun, 11 Aug 2019 18:00:41 +0000

Introduction

CSS 2D transforms allow you to modify an element by its shape, size, and position. There are currently 9 methods you can use with the transform property:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Today we'll be using skewX(), skewY(), scale(), and rotate() to create the following card design:

Note: you can also use skew(x,y) as a shorthand for skewX() and skewY().

Here's a step-by-step video below that you can watch if you'd prefer to follow along that way. Otherwise, each step is outlined below the video. Let's dive in!

Get Started

Development Environment

We're going to be using VS Code as the code editor with the HTML5 Boilerplate and Live Server extensions installed. Also follow the quick documentation here to launch VS Code projects from the command line using a Mac in case you don't have that setup.

Create the Project

Let's use the VS Code command line to create a project. Open VS Code and select Terminal > New Terminal. A terminal window will open at the bottom of VS Code. If you're new or need a refresher on terminal commands check out this Mac Terminal Cheat Sheet.

Head to the directory you'd like to create the project in using the cd (change directory) command followed by the directory's location. You can get an idea of what's available by typing ls (list) in the command line first. I will head to the Desktop by typing cd Desktop/ and pressing return. If you need to go back a directory you can type cd .. in the terminal.

Note: you can begin typing and then press Tab to autocomplete.

We'll start creating the project by using the mkdir (make directory) command followed by the name of our project. We'll do mkdir slanted-card. Once that directory is made we need to go into it by typing cd slanted-card/ and pressing return.

Inside the slanted-card directory we will create another directory for the images by typing mkdir images and pressing return. Then we'll create two files using the touch command: touch index.html styles.css. Now type ls in the command line to list everything in the slanted-card directory. You should see images index.html styles.css printed.

Next, type code . to open the project in a new VS Code window.

Note: you'll need to setup this code shortcut on a Mac using the launch projects from VS Code documentation.

The last thing we need to do before we start writing the HTML is to import the logo into the images folder. You can download the logo I used here (3 more variations provided), but feel free to use your own. I recommend using SVGs of 20-25 pixels in height.

Write the HTML

Open the index.html file in VS Code and start typing html and html-boilerplate should appear in the dropdown menu. Select this and press return and the HTML5 Boilerplate extension will insert boilerplate code to start your project. Feel free to fill out the title and description metadata, but it's not necessary for the design. However, it is important to import the styles.css file in the <link rel="stylesheet" href="styles.css"> tag.

Get rid of everything between the opening and closing <body> tags that was inserted from the boilerplate extension. Inside the body tags write the following:

There's not much going on here with the HTML, but I do want to point out that we're setting the source to the .customer__picture img to a direct Unsplash image URL.

In order to get the direct URL first head to Unsplash and find an image you want to use. Then right-click on the image and select Open Image in New Tab.

At the top of the browser towards the end of the URL you will see a string that starts with w= followed by a number. You can change this number to the image width you want and press return to get the new image. Copy the entire URL and use it as the src for the .customer__picture img.

Let's get the project launched via Live Server. Right-click on the index.html file in the VS Code Explorer and select Open with Live Server. A new browser window will open and you'll see the HTML you just wrote! 🤘

Write the CSS

In the beginning of this section we'll focus on the CSS for the general card design. At the end we'll create the skewed card effect using CSS 2D transforms.

Import Google Fonts

Head here to grab the Lato typeface from Google Fonts. In order to gain access to the Lato font we need to @import it at the top of the styles.css file. Here's how to get the code you need from Google Fonts:

Now just paste that code at the top of your CSS file.

Note: be sure to only import the fonts and weights you need. The Load Time metric helps ensure your project isn't importing too many fonts.

Add Resets and Body Styles

We'll start by adding simple CSS resets and body styles:

Note: the body styles are only necessary to center the card in the browser.

Add Card Styles

Let's add the styles for the basic card design:

Your design should now look like this:

Add CSS Transform Styles

We'll first add a skewX() and skewY() transform to the .shape style:

transform: skewX(-5deg) skewY(-5deg);

Note: you can also you the shorthand skew(x,y)

Now the entire card will be skewed, including the image, logo, and text. In order to reverse the skew effect on these elements we will add a transform to them as well, but we'll add the opposite value. For example, if we set the skew to -5 on the card we will set a skew of 5 on each element we want to revert.

Let's start by adding a transform skew to the .customer__picture img:

transform: skewX(5deg) skewY(5deg);

You'll notice now that the edge of the image is now visible. To fix this we'll add the scale method to the image and scale it by 15%:

transform: skewX(5deg) skewY(5deg) scale(1.15)

The next element we need to fix is the .text class. So, we'll add the following:

transform: skewX(5deg) skewY(5deg);

The last thing we need to use transform on is the shape shadow. We want the shadow to be skewed by the same amount as the .shape class, but currently the skew on the .shape class is not affecting the shadow because the shadow is not a child of the .shape class.

To fix this we'll add the following to the .shape__shadow class:

transform: skewX(-5deg) skewY(-5deg);

Now the shadow will be invisible because it's behind the shape. So we'll add a rotate method to the transform in order to make the shadow rotated and visible:

transform: skewX(-5deg) skewY(-5deg) rotate(-20deg);

And that's it! Now your final CSS should like like this:

Continue Learning

If you made it this far, thank you! You can keep up with all my content on by subscribing to the Skillthrive Youtube channel. I have a number of courses on there that you can start watching for free, including a 3.5 hour course on how to build a blog from scratch using React, Gatsby, and Contentful.

Build a React Accordion Component Using React Hooks

Hunter Becton — Mon, 15 Jul 2019 20:42:32 +0000

Build a React Accordion Component from Scratch Using React Hooks

In this tutorial you will learn how to create an animated React accordion component using React Hooks like useState and useRef.

What are React Hooks?

In simplest form, React Hooks make it possible to use state without the need to create a class. If that’s enough to sell you on using Hooks, then read (or watch) on. However, if you’d like a deeper dive into React Hooks check out Making Sense of React Hooks by Dan Abramov, co-author of Redux and Create React App.

You can get the final code here from CodeSandbox.io. I’ve also recorded the entire process in the video below and outlined each step in the subsequent post–enjoy!

Final Project

Create a React App in CodeSandbox.io

To get started head to CodeSandbox.io and sign up with your GitHub account. CodeSandbox is a web-based code editor that makes it easy to write code and create web applications without the need to setup anything locally on your computer–perfect for a quick tutorial.

Once you’re on the dashboard click on the Create Sandbox button and select the React Client Template. This will create a basic React application that you can start using to build the accordion.

Before you start writing the accordion component the first thing you want to do is remove the out-of-the-box styling in the styles.css file. Then add the following global styles:

Setting box-sizing: border-box ensures that padding is added to the inside of elements while margin: 0 and padding: 0 ensures the browser isn’t adding any default padding to elements.

Create the Accordion Component

After cleaning up some of the boilerplate code go ahead and create a new folder in your project called Components. Inside this folder create two files: Accordion.js and Accordion.css. You’ll start with the most basic version of the accordion component, only passing in props and not using React Hooks. You’ll add React Hooks later in the tutorial. With that said, open the Accordion.js file and add the following:

In this code you created a simple function (stateless) component, passing in props. One prop you used is dangerouslySetInnerHTML. It’s important to note that improper use of dangerouslySetInnerHTML can open you up to a cross-site scripting (XSS) attack. Before using dangerouslySetInnerHTML in your project be sure to read How to prevent XSS attacks when using dangerouslySetInnerHTML in React by Jacob Jang.

With the most basic form of the accordion component built you can now import it into your index.js file and use it in the return, passing in props for title and content like so:

For the demo I used LoremIpsum.io to generate filler text. It’s also important to note that in the last accordion I wrote HTML within the content prop in order to show you how dangerouslySetInnerHTML will render HTML within a string.

Create the Accordion CSS Styles

Now it’s time to style the accordion component by writing the following in the Accordion.css file:

I’ll spare too much detail here and refer to the comments I left in the CSS file to explain what the classes are doing. However, I do think it’s important to point out that you’ll be passing in some styles like .active and .rotate to React state later in the tutorial. Also, the transition property is being used on classes like accordion__icon to create smooth animated transitions when a CSS property changes or when new classes are added to elements.

Create the Chevron Component

Each accordion will have a chevron on the right side that will rotate to point downwards when active. To create the chevron you’ll start by going to FontAwesome.com and downloading the SVG for the chevron-right icon. Here’s a quick GIF on how to do that:

Once the SVG finishes downloading open it in a text/code editor of choice. Then copy everything in the file and head back to CodeSandbox. Once you’re there create a new file in the Components folder called Chevron.js and write a simple function component, passing in what you copied from the SVG in the return like so:

Notice the props this component is using: className, height, width, and fill. You’ll use those in the Accordion.js file like so:

Add React Hooks to the Accordion Component

Now let’s get to the real reason you’re here: React Hooks!

Implement useState: setActive and setActiveState

The first hook you’ll use is useState(), which you’ll add to your Accordion component. With hooks there’s no need to convert a function component into a class component–just initialize the hook like so:

First, you’ll need to import useState from React. Then you’ll use array destructuring syntax to set the current state value (setActive) and function that allows you to update the state (setActiveState). This new constant is set equal to useState and the only argument useState needs is the initial value, which in this case is an empty string.

Create the toggleAccordion Function

Now that you have your first state defined you need to create a function within the component that will be called when the accordion is clicked by an user. To make sure it’s clear what the function does, you can name it toggleAccordion.

This first thing this function will do is call setActiveState(). Within setActiveState() you’ll write the following ternary operator: setActiveState(setActive === “” ? “active" : “”. This ternary operator is checking if setActive is empty, and if it is it will change the state to active. If it is already set to active it will set it to an empty string.

You can then use the value of setActive within the button className using a template string. Last, pass an onClick event listener that calls the new toggleAccordion function:

Now when you save your project you can click on the accordion and the background color will stay the value you set on the .active class in your Accordion.css file. You can always inspect the element to see the class toggle from accordion to accordion active.

Implement useRef to Identify scrollHeight

The next React Hook you’ll use in the tutorial is useRef(). This hook will create a reference to a DOM element, which you can then get data off of by accessing .current. The data you want to access is scrollHeight, which gives you the height of an element even when the element’s overflow is hidden.

You then can use the data from scrollHeight to change the max-height of the content within the accordion, which you’ll initially set to 0. Doing this will create an animated expand/collapse effect for the accordion content.

To start you need to import useRef from React and initialize it within the accordion component. You can call this reference content so it’s easy to remember what it’s referencing. You’ll also want to set its initial value to null.

Then you can set the reference on the content element by passing in the following HTML attribute: ref={content}.

In order to see the value of each reference you can console.log the value in the toggleAccordion function. By now you should have the following code:

Now you can open the console within CodeSandbox and see the scrollHeight of each accordion content section printing to the console when you click on it. Feel free to remove the console.log once you’re done testing it out.

Implement useState: setHeight and setHeightState

With access to the accordion’s content height you can now use that value to create the animated expand/collapse effect. To start you’ll need to create a new state called setHeight with useState–just like you did for setActive.

This time set the initial state to 0px because you’ll be using that value to make sure all the content is hidden when the accordion components are rendered.

You’ll also change setHeight using setHeightState, which you’ll call in the toggleAccordion function. Just like with setActiveState you will write a ternary operator, but this time you’re checking if setActive is equal to active. If it is the function will change setHeight to 0px. Else, if it’s already 0px it will change to the value of the accordion’s content scrollHeight.

Finally, you’ll use the value of setHeight to set the maxHeight via an inline style. With that your code should appear as follows:

Once you save that you can click on each accordion to reveal the content. Feel free to change the speed and acceleration of the animation in the transition property of the .accordion__content class in your Accordion.css file.

Implement useState: setRotate and setRotateState

You’re at the homestretch! The last thing you want to do is animate the chevron to point downwards by rotating it 90 degrees clockwise when the accordion’s setActive state is active.

To do this you’ll create a new state called setRotate. You’ll set the initial value equal to the string accordion__icon and write a similar ternary operator in the toggleAccordion function that checks the current value of setActive. This time if setActive is equal to active the function will change the setRotate value to accordion__icon. Else, if it’s not active it will change setRotate to accordion__icon rotate. You’ll then use the value of setRotate to dynamically change the className of the chevron. Your Accordion.js component should look like this:

And that’s it! Now when you click on an accordion the chevron will rotate downwards. Click again and the accordion will revert to its initial state.

Similar to .accordion__content, you can tweak the animation by changing the transition property on the .accordion__icon class in your Accordion.css file.

Finishing Words

I hope this tutorial was a great example of how to use React Hooks. If you enjoyed the tutorial be sure to check out my other courses on the Skillthrive YouTube channel. And as always, if you have any questions feel free to drop them below.

DEV Community: Hunter Becton

Middleware in Next.js: Moving from Express

Before: My Express Protect Middleware

Now: My Next.js withProtect Middleware

Chaining Multiple Middlewares in Next.js

React Tutorial: Change State with React Hooks and Mouse Events

Introduction

Get Started

Skip Building the Card Component

Let's Talk About Emotion(s)

Create State Using the useState React Hook

Create a Method to Handle the State Functions

Add onMouseEnter and onMouseOut Events to the Buttons

Continue Learning

Would you buy a design system with React components?

Code a Skewed Card Design Using CSS 2D Transforms

Introduction

Get Started

Development Environment

Create the Project

Write the HTML

Write the CSS

Import Google Fonts

Add Resets and Body Styles

Add Card Styles

Add CSS Transform Styles

Continue Learning

Build a React Accordion Component Using React Hooks

Build a React Accordion Component from Scratch Using React Hooks

What are React Hooks?

Final Project

Create a React App in CodeSandbox.io

Create the Accordion Component

Create the Accordion CSS Styles

Create the Chevron Component

Add React Hooks to the Accordion Component

Implement useState: setActive and setActiveState

Create the toggleAccordion Function

Implement useRef to Identify scrollHeight

Implement useState: setHeight and setHeightState

Implement useState: setRotate and setRotateState

Finishing Words

Create State Using the `useState` React Hook

Add `onMouseEnter` and `onMouseOut` Events to the Buttons