Menu
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.
850
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.
142
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 :
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 :
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
