Next Js With Express

Posted on  by admin
Editor’s Note: This blog post was updated with relevant information and code blocks in October 2021.

It goes without saying that React is an excellent choice for building high-quality web applications. However, as your projects become more complex, you’ll need to learn about client-side routing, page layout, and so on to scale your applications.

  • At some point, you’ll want your pages to load faster, for example.
  • Oftentimes, this is where things can become difficult.
  • Next.js is a universal JavaScript framework that runs in both the browser and the server. It offers developers an easy way to get started, and, because it uses React for templating, it is also a straightforward way for developers with React experience to get productive fast.

One of its strong points is that it handles server-side rendering excellently, and it integrates with Express just well.

Yilmaz
14k

But we’re getting ahead of ourselves. Let’s talk about why you need server-side rendering in the first place. Then we’ll start building things. Next.js is an open-source development framework built on top of Node.js, enabling React-based web applications functionalities such as server-side rendering and allowing the ability to generate static websites.

YilmazYilmaz
14k9

One of its strengths is that it handles server-side rendering excellently, and it integrates with Express just as well. For us to fully take advantage of Next, we need to understand what server-side rendering is, how it works, and then get started to building our example server-side rendered React and Express web application.

Server-side rendering was the conventional method for getting your HTML up onto a screen. This refers to using a server environment to get your HTML up to the browser.

So why the fuss if it’s a conventional method that’s been around forever? Remember the introduction of MVC (model, view, controller) concept that caused some concern? Basically, there was some disagreement that eventually brought about the rise of JavaScript frameworks for rendering views.

So what has this got to do with anything?
Cássio LacerdaCássio Lacerda
1,369
1

Getting started with Next.js

  • It can also impact SEO if crawlers can’t see the content of the page quickly. One solution was to render the JavaScript files from the server before returning to its output to the server.

What is Next.js?

Getting started with Next is simple. Because it’s built on top of Node, go ahead and install Node v10.13 or later. You’ll also be using your text editor and terminal app for this tutorial. There are two ways we can create our application.

The first method is what I recommend for this tutorial, as it’s ready to go out of the box.

  • The command above uses the tool called create-next-app, which bootstraps a Next.js app for you.
  • It uses a default learning template specified through the --example flag.

Once this is done, run the development server:. Once this is done, navigate to http://localhost:3000, where you should see the example web application running:. First, start by using the following code:.

  • Next, open up your package.json and replace your script section with this:.
  • Run the npm run dev command, you should get an error like:.
  • This is because Next uses the pages directory and the files in them to map its routes.

This means if we have a file called index.js in our pages folder, Next would try to use the component in it as our entry point. Let’s create the pages folder and the index.js file. Next, let’s add some code to the pages/index.js file:. Save the file above and run the command npm run dev in your terminal.

If you visit your browser, see the text “Hello Next.js, this is your friend Brian from LogRocket” printed out on your browser. Notice how easy this is? No need to mount React to a div, no need to import React, no need to set up routes. In our usual React app, we would need to do other configs to allow for code-splitting and server-side rendering.

But hey, view your page source. You’ll be amazed. It’s all done out of the box. I bet you thought that was all the magic Next.js had in store. But Next went a step further by allowing better server-side rendering using Express for the tougher cases.

Conclusion

First, add Express into your app:. Then create a file called ssr-server.js in your app and add the following content:. In the code block above, we imported the Express and Next libraries and created an instance passing in a boolean based on the environment which detects whether to launch Next.js in dev or production mode.

The app.getRequestHandler returns a request handler that we can use to parse all HTTP requests. The prepare function returns a promise, so we can add a .then pipe to it.

In the .then call, we initiate Express, and we use a wild card route to catch all routes and return them to the handler function. Now update your npm dev script to run the server-side rendering application entry point:.

Iterating

  • If you run npm run dev, your page would spin up looking the same as it was, but we can now easily achieve clean application routing now, as seen below:.
  • In the code above, we use the popular express routing to define such routes, then we pass the page that should be loaded and the id as a query param to the main Next app.
  • Here, the call /p?id=2 happens under the hood where no one can see what is going on. The regular user sees the URL as /p/2/. Now that we’ve developed our application, we’ll need to deploy it into a production environment. First, we have to build the app. Then we can serve it using the command below:. Wow, that’s cool. What if you want to export the app as a static HTML file? Great question. First, create a file called next.config.js in the root of your app and add the following content:.

Finally, build and export your app. Next.js provides us with an extensive list of features that are easy to use and configure, such as clean routing, faster load time, improved SEO, and so much more.

You can learn more about Next.js from the official documentation. Modified4 months ago. Suppose you have a simple block of code like this:.

Serving and exporting the app

  • This function has two parameters, req and res, which represent the request and response objects respectively.
  • On the other hand, there are other functions with a third parameter called next.
Clifford FajardoClifford Fajardo
1,011

Using Next and Express