Deploying NextJs Application on Window’s IIS Server

NextJs is the server-side rendered React-based framework for creating Single page applications. It is most popular because of its server-side rendering feature.

 

It is very straightforward to start using NextJs for your next application. You don’t need to explicitly configure anything for using NextJs, All you need to do is npm run dev and start building your application.

 

What is Server-Side rendering?

Server-side rendering (SSR) is the ability of a frontend framework — that prepares the web page on the server side by fetching user-specific data and sending it to the users’ screen instead of preparing the webpage on the client side for displaying it to the user.

 

In NextJs, you have the option to render the page on the server side or either render it on the client side as the normal create-react-app SPA does.

 

There are definitely some benefits of server-side rendering, and that is why the NextJs framework becoming so popular. Because of SSR, the initial page loads faster, providing better interaction for end users. Also, It helps the search engine to crawl the site for better search engine optimization.

 

If NextJs is the front-end framework, How does it prepare the web page on the server?

NextJs framework is built on top of NodeJs. As you might know, NodeJs is the backend JavaScript runtime environment that provides the strength for the NextJs application to prepare the webpage on the server side for providing SSR features.

 

The getServerSideProps() function on NextJs is used to render a page whose data must be fetched at the requested time.

 

Deploying NextJs Application

Last month, I spent around a week trying to find out the best way to deploy my NextJs Application. Many random articles suggest Vercel and other similar platforms like Netlify, Heroku, and so on. But for me, already having a windows server, I would not like to spend extra bucks for my small side project. After a little more research, I found that people are also deploying NextJs on window’s IIS server using iisnode.

 

iisnode is an open-source native IIS module written in c++ that allows node.js to run inside Windows IIS.

 

Here we will use the nodejs on the IIS server deployment approach. For that, we need two files - server.js and web.config. Now create the entry point of an application, that is server.js.

 

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000;
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // 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') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

 

The web. config is a file that is read by IIS and the ASP.NET Core Module to configure an app hosted with IIS. So here is our web.config file.

 

<configuration>
  <system.webServer>    
    <rewrite>
      <rules>
        <rule name="myapp">
          <match url="/*" />
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>

    <iisnode node_env="production" nodeProcessCommandLine="&quot;C:\Program Files\nodejs\node.exe&quot;" interceptor="&quot;%programfiles%\iisnode\interceptor.js&quot;" />

  </system.webServer>
    <location path="" overrideMode="Deny">
        <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
        </system.webServer>
    </location>
</configuration>

 

The root folder of my application looks like this after adding server.js, web.config, and running npm run build.

 

 

Publishing NextJs application on IIS

You need to install IISNode and URLRewrite before setting up the deployment. Then, create a new website on IIS and point its physical path to the folder containing .next, node_modules, server.js, and web.config.

 

 

The iisnode folder is created automatically after the application runs.

 

If your deployment folder resides on wwwroot on c:/ drive. You may need to explicitly provide read/write permission to IIS_Users on the whole folder. The source code is available on this GitHub Repo.