Create middleware for the web with Next.js

Foreword

If Nuxt.js is a framework that helps us build websites with Vuejs using the Server Side Rendering mechanism (Render data from server side. Using this method, when googlebot crawls to any link from the website, we can read the content from full website). When we build websites with Reactjs there is a corresponding framework that everyone may know is Next.js.

main content

1. Introduction to Next.js

What is the Universal Javascript App?

The Universal Javascript App is a web application written in javascript (formerly known as isomorphic), which runs both the server and the browser side in the same source code. Of course, there are some that only need to be run in the browser such as page transitions, animations, elements, or using the local storage of the browser, while some source code is related to the process layer. ) or server-specific activities such as session, authentication, etc.

Introducing Nextjs

Next.js is a compact framework built from React, Babel and Wepack created to help programmers create React web applications with SSR (Server Side Render). As you know with React.js, we are building a front-end application with React-managed UI, the weakness is client-side-render only, so SEO will be difficult (can fix server side with javascript handling like Prerender.io ), Next.js makes it very easy for us to have SSR.

2. Math problem

I have also done a number of projects with vuejs’ Nuxtjs, most projects have done SEO so the use of SSR (Server Side Rendering) for the web is really necessary. Recently I have learned about Nextjs and tried to use it, sometimes changed a bit =)). Ok, both frameworks use the SSR mechanism, no problem. I also read docs and started working on normal code but …

If you have ever used Nuxtjs, VueApp, ReactApp or Nextjs, you will see that they are all apps completely separate from Api, with their own routers. Nuxtjs has middleware support that implements Authorization of routers. Nuxtjs has middleware support for us already. You just need to create the middleware file:

To use middleware, the declaration in page.vue is done.

At first I thought that Nuxtjs supported writing so easily, so was Nextjs, but I was wrong =)), searching, digging up the docs of Nextjs did not see any =)). Therefore, this article I want to introduce you a way to write middleware when you use Nextjs.

3. Settlement

Thought: I will use the context, React HOC and store redux to write middleware for the router page.

Install Nextjs:

Or

And add package.js as follows

okie done =)) Continue

Create middleware / auth.js file Execute creating a HOC, use context to get auth store.

Create the file utills / auth.js

Here after passing the auth store, role user, and context component, check:

• Server side: writeHead if the user does not have access
• Client side: Use Router push.

And use:

Quite simple is not it, now let’s open the site and test offline

Conclusion

Sure, after the article, you can create middleware for the website using Next.js, right? Hope to receive more comments.