Embrace the flexibility of using Next.js with or without Express.js

Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project.

Currently, my backend is built with an express server. In next.js, there are performance advantages offered by using serverless functions in the api folder. So, my main question is whether I should migrate the express server to serverless functions or stick with it and integrate it with next.js. Additionally, I'm unsure if using express within a serverless function is a good practice.

I've gone through several tutorials on next.js, and many of them utilize express even though it's not recommended in the official documentation. This leaves me wondering if there are any overlooked benefits to using express with next.js.

[EDIT]: The backend primarily includes routes for interacting with the database, as well as file uploads, all secured with JWT authentication middleware.

javascriptexpressnext.jsserverless

Answer №1

I prefer not to utilize express.js. This decision is based on the performance advantages it offers, as well as the additional layer of debugging and maintenance it introduces.

Nevertheless, certain situations may necessitate relying on express:

  1. Some plugins, particularly older ones, are dependent on it. For instance, up until recently, the next-18next plugin required express.js for multi-language support. This explains why some tutorials and examples still mention express if they incorporate such a plugin. Fortunately, the next-i18next team recently updated the plugin to eliminate this dependency, allowing users to use it without needing express. It will take time for other plugins to make similar changes, so tutorials and documentation may lag behind.
  2. Depending on your hosting configuration, you might require express.js for handling asset caching. If you're using Vercel for hosting your next.js apps, which is tailored for this purpose, managing caching in their console eliminates the need for an express server, making it a more preferable option in my opinion.

To sum up, unless you are hosting on Vercel or do not require asset caching, and are not using any plugins that rely on express.js, setting up express would be unnecessary and inefficient.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CORS policy has blocked access to make requests from 'http://localhost:3000' to 'http://localhost:5000/api/products' using XMLHttpRequest due to the lack of 'Access-Control-Allow-Origin' header

I've been facing an issue while trying to retrieve data from my database using Postman and Axios. I keep encountering a CORS error, despite adding the "Moesif Origin & CORS Changer" plugin on Chrome. I have also set up CORS on the server but still fac ...

node.jsreactjsexpresscors

The video's path could not be located within the src Directory of the next js application

I've tried multiple methods to import the video, but it keeps throwing errors and I'm unable to embed it. Here is the file path for app/page.tsx import {videoBg} from '../assets/video/videoBg.mp4' export default function Home() { re ...

next.jsdirectorysrcvideo-embedding

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

javascriptjqueryhtmlcss

Sending a null variable via an AJAX post request from jQuery to PHP

Query: <table> <tr> <td id="percentage">Percent:&nbsp; <?php echo $percent; ?> %</td> </tr> </table> <div class="box-footer" style="float: right"> <a href="<?php echo base_url(); ?>stu ...

javascriptphpjqueryajax

Learn the process of submitting tag values using JohMun/vue-tags-input feature

I am a beginner in Vue.js and I am looking to implement an input field with multiple tags (user skills) using a Vue.js component. Although I have managed to make it work, I am struggling to figure out how to submit the tags in a form. Below is my code: T ...

javascriptlaravelvue.js

What are the methods for differentiating between a deliberate user click and a click triggered by JavaScript?

Social media platforms like Facebook and Twitter offer buttons such as Like and Follow to allow users to easily engage with content. For example, on Mashable.com, there is a Follow button that, when clicked, automatically makes the user follow Mashable&ap ...

javascripthtmlfacebook

I'm looking to configure @types for a third-party React JavaScript module in order to use it with TypeScript and bundle it with webpack. How can I accomplish this?

Imagine you have a third-party npm package called @foo that is all Javascript and has a module named bar. Within your TypeScript .tsx file, you want to use the React component @foo/bar/X. However, when you attempt to import X from '@foo/bar/X', y ...

javascripttypescriptnpmwebpack

Uniform Height for Several Selectors

I came across a script on Codepen created by RogerHN and decided to customize it for a project I'm currently working on: https://codepen.io/RogerHN/pen/YNrpVa The modification I made involved changing the selector: var matchHeight = function ...

javascriptjquery

Steps to update the value of an object stored within an array

I have a collection of items stored in an array. Each item is represented by an object with properties. I want to update the value of a specific property within each object: var array=[{a:1, b:false}, {a:2, b:true}, {a:3, b:false}] My goal is to set the p ...

javascriptarraysreactjs

The value of the ng-model checkbox does not update or change when the checkbox is clicked

There is a checkbox being used in the code snippet below: <input type="checkbox" ng-click="toggleShowOtherUserConfiguration()" ng-model="showOtherUserConfiguration" name="ShowOtherUserConfiguration" value="showOtherUserConfigurati ...

javascript.netangularjscheckbox

The axios.get() method is failing to retrieve the data on the client side

Struggling to set up a LIKE system on my social media app - using React on the client-side and Express on the server-side. I'm attempting to retrieve current LIKE stats by making a GET request with "axios" inside a "useEffect". However, the response d ...

node.jsreactjsexpressaxiosget

How can I retrieve the path to a specific subnode using Javascript/JSON?

What is the best way to obtain a JSON path that leads to a specific child node within an object? For example: var data = { key1: { children: { key2:'value', key3:'value', key4: { ... } ...

javascriptjsonxpath

Verify whether the input from ng-model is numeric

When utilizing ng-model binding in an input field, data is usually stored as a string. Is there a way to verify if the user has entered a number? ...

javascriptangularjs

Instant Access to a Precise Slide

Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...

javascripthtmlmootools

Dealing with errors in Next.js when using axios in Express

Currently, I am working on implementing the login feature for my application using an asynchronous call to my API. The issue I am facing is that despite express throwing an error, the .then() function is still executing with the error instead of the actual ...

javascriptnode.jsreactjsexpressnext.js

Nested arrays in the JavaScript programming language

Is this JavaScript code accurate: var options = []; options.push(["Tom","Smith"]); options.push(["Mary","Jones"]); where each item in options is a two-element array of strings. I plan to add items to options using a for loop. Furthermore, can I i ...

javascript

Is there a way to implement a directive wrapper for ng-grid that allows the grid options to be specified using a directive attribute?

My goal is to create a reusable directive wrapper for ng-grid, where I can dynamically apply the ng-grid options through the use of an attribute. Below is the basic structure of the code that almost achieves what I am looking for: angular.module('my ...

javascriptangularjsangularjs-directive

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

document ready function in the Microsoft AJAX client side library

The Microsoft AJAX client-side library contains various functions that imitate the server-side Page Life Cycle and conditions like if (!Page.IsPostBack). I am unsure about which client-side function corresponds to the equivalent server-side method. What is ...

javascriptjqueryasp.net.netajax

Showing C# File Content in JavaScript - A Step-by-Step Guide

Is there a way to showcase this File (c#) on a JavaScript site? return File(streams.First(), "application/octet-stream", Path.GetFileName(element.Path)); I am looking for something similar to this: <img id="myImg" src="_____&qu ...

javascriptc#filemodel-view-controller