Configuring a custom server with Next.js and Node.js allows you to handle complex routing, middleware, and other server-side functionality that Next.js does not provide by default. Here's a quick explanation of how to create a custom server using Next.js and Node.js.
Steps to Configure Custom Server with NextJs + NodeJs + ExpressJs
Set up NextJs Project
I recommend installing a new Next.js app with create-next-app, which will configure everything for you immediately.
npx create-next-app@latest
Install Dependencies
Apps built with Next.js and Node.js often require certain dependencies. Make sure you have Node.js installed and run:
$ npm install express
Configure NextJs Custom Server
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
await app.render(req, res, '/a', query)
} else if (pathname === '/b') {
await app.render(req, res, '/b', query)
} else {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> Ready on http://${hostname}:${port}`)
})
})
Update Package.Json
To start the custom server, update the scripts in the package.JSON like this:
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
And also do not forget to synchronize your port number with the live one.
Your Next.js app is now running on a custom server with Node.js. You can expand this configuration by adding more custom routes, middleware, or any other Node.js features your application demands.
Frequently Asked Questions
Can you use Next.js with NodeJS?
In your Next.js application, you can use one of two server runtimes: The Node.js Runtime (default) provides access to all Node.js APIs and compatible packages in the ecosystem. The Edge Runtime provides a more restricted set of APIs.
How to start a Next.js server?
To start the development server, type npm run dev. Visit http://localhost:3000 to view your application. Edit the app/page.tsx (or pages/index.tsx) file and save it to view the modified results in your browser.
Is Next.js better than NodeJS?
Next.js allows developers to create API routes within their projects, allowing them to add backend functionality such as data fetching, authentication, and so on. These API routes are serverless functions, thus they are flexible and quick. But using NodeJs ExpressJs as your backend will give you high flexibility for sure.
Is Next.js frontend or backend?
While Next.js is capable of server-side rendering, it excels on the front end, and its backend capabilities may be limited compared to dedicated backend frameworks.
Does Next.js need a server?
Next.js allows you to start as a static site or Single-Page Application (SPA) and then expand to server-required features as needed. Next.js supports this static export, so it can be deployed and served on any web server that can provide HTML/CSS/JS static files.
Can Next.js replace the backend?
Next.js adds its own server by default with the next start command. You can continue using your existing backend with Next.js.
Can Next.js run serverless?
To deploy serverless, you can use a platform like Vercel, which was developed by the same team that developed Next.js. Vercel offers a simple yet powerful framework for launching serverless Next.js apps with little setup.