10

I had a requirement of server side rendering in my project.So, I have developed it using next js and now i got struct in deployment.

I need to deploy my project in iis and dont know how i can achieve that. I tried a lot no luck. It works fine in development mode but not in production.

I tried next export but this is for static pages deployment and my project uses dynamic pages.

Any help will be appreciated. Thanks in advance.

Tushar patel
  • 3,279
  • 3
  • 27
  • 30
  • which folder you are pointing to the iis configuration? also, prefer this documentation on how to deploy [link](https://nextjs.org/learn/basics/deploying-a-nextjs-app)did you get any error message when you try to access site? – Jalpa Panchal Jun 27 '19 at 07:15
  • Yes. i followed that document but still it not clear about deployment. I m trying to deploy in IIS and don't know which folder i should point to iis and don't know how iis will identify the entry point of the app. – Tushar patel Jun 27 '19 at 11:46
  • I am facing same issue @Tusharpatel. any success? – Salman Lone Feb 11 '20 at 03:09
  • No. Still didn't found the solution. Very disappointing framework. @Salman Lone – Tushar patel Feb 12 '20 at 13:49
  • have you deployed it on production servers? i.e. AWS S3 or EC2? @Tusharpatel – Salman Lone Feb 19 '20 at 07:05
  • No. I tried this in IIS. I need to deploy this in Virtual Machine which has windows OS. So my requirement is to host the app in IIS only. @Salman Lone – Tushar patel Feb 24 '20 at 07:12

2 Answers2

3

Try this youtube link it helped me deploy the nextjs app on IIS. Do not forget that you need NodeJS, URLRewrite and IISNode on your server.

You build your nextjs app and deploy it to the IIS folder on the server. You also need the node_modules folder with all the dependencies including express and node.

Mircea Matei
  • 275
  • 2
  • 5
2

I have the same problem as you, but so far I have successfully deployed and solved the routing problem, but the only thing that has not been solved is that I cannot redirect to the "NotFound page" (404.js), Maybe we can find a solution together.

This is the current solution :

folder tree :

  • node_modules
  • public
  • pages
    • index.js
    • first.js
    • two.js
    • _error.js
  • next.config.js
  • package.json
  • package.lock.json
  • README.md

package.json :

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next build && next export"
  },
  "dependencies": {
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
  }
}

next.config.js :

const data = [
    {
        path: '/first'
    },
    {
        path: '/two'
    }
];

module.exports = {
    exportTrailingSlash: true,
     exportPathMap: async function () {
         //you can get route by fetch
         const paths = {
             '/': { page: '/' }
         };

         data.forEach((project) => {
             paths[`${project.path}`] = {
                 page: project.path,
             };
         });
         return paths;
     }
}

index.js :

import Link from 'next/link'
import React from 'react';
import Head from 'next/head'

export default function Home(props) {

  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <h1 className="title">
          <Link href="/first">
            <a>page first</a>
          </Link>
          <Link href="/two">
            <a>page two</a>
          </Link>
        </h1>
    </div>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

first.js :

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {

  return (
    <>
      <Head>
        <title>First</title>
      </Head>
      {"First page"}
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>

    </>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

two.js :

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {

  return (
    <>
      <Head>
        <title>two </title>
      </Head>
      {"two page"}
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>

    </>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

and then run the scripts "prod", you will have /out folder， just use it as the root directory of IIS, now test the route :

  1. Enter URL http://{your IP or domain}/ => you will see index.js
  2. Enter URL http://{your IP or domain}/first => you will see first.js
  3. Enter URL http://{your IP or domain}/whatever => you will get 404 error from IIS, and I need the help here!

update the reply, Finally, I know how to solve it, add web.config and redirect to the 404 errpr page.

note: <action type="Rewrite" url="404/index.html" /> // You can specify the error page here!

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="404/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
Andy Ho
  • 872
  • 7
  • 14