CODEWITHSUNDEEP
iisdeploymentnext.js
Tushar patel
Tushar patel

Reputation: 3407

Deploying Next Js project in IIS

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.

Upvotes: 10

Views: 13645

Answers (2)

NYAMAI MATHEW
NYAMAI MATHEW

Reputation: 1

use this link and follow the instructions "https://medium.com/codenp/deploying-nextjs-application-on-windows-iis-server-cabdc22bccf8".

Upvotes: 0

Andy Ho
Andy Ho

Reputation: 1064

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>

Upvotes: 2

Related Questions