Next Js api static export return 405 in iis

Question

When I export NextJs app using next export and publish in iis (Windows Server 2019), applying url rewrite helps every route reachable but only the api part non reachable. When I want to go api route, it return http 405 error. I try to attach here api code and project settings, index.js

import Head from 'next/head'

export default function Home() {
return (
<div className="container">
  <Head>
    <title>Create Next App</title>
    <link rel="icon" href="/favicon.ico" />
  </Head>

  <main>
    <h1 className="title">
      Welcome to <a href="https://nextjs.org">Next.js!</a>
    </h1>

    <p className="description">
      Get started by editing <code>pages/index.js</code>
    </p>

    <div className="grid">
      <a href="https://nextjs.org/docs" className="card">
        <h3>Documentation &rarr;</h3>
        <p>Find in-depth information about Next.js features and API.</p>
      </a>

      <a href="https://nextjs.org/learn" className="card">
        <h3>Learn &rarr;</h3>
        <p>Learn about Next.js in an interactive course with quizzes!</p>
      </a>

      <a
        href="https://github.com/vercel/next.js/tree/master/examples"
        className="card"
      >
        <h3>Examples &rarr;</h3>
        <p>Discover and deploy boilerplate example Next.js projects.</p>
      </a>

      <a
        href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
        className="card"
      >
        <h3>Deploy &rarr;</h3>
        <p>
          Instantly deploy your Next.js site to a public URL with Vercel.
        </p>
      </a>
    </div>
  </main>

  <footer>
    <a
      href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
      target="_blank"
      rel="noopener noreferrer"
    >
      Powered by{' '}
      <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
    </a>
  </footer>

  <style jsx>{`
    .container {
      min-height: 100vh;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    main {
      padding: 5rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    footer {
      width: 100%;
      height: 100px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    footer img {
      margin-left: 0.5rem;
    }

    footer a {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .title a {
      color: #0070f3;
      text-decoration: none;
    }

    .title a:hover,
    .title a:focus,
    .title a:active {
      text-decoration: underline;
    }

    .title {
      margin: 0;
      line-height: 1.15;
      font-size: 4rem;
    }

    .title,
    .description {
      text-align: center;
    }

    .description {
      line-height: 1.5;
      font-size: 1.5rem;
    }

    code {
      background: #fafafa;
      border-radius: 5px;
      padding: 0.75rem;
      font-size: 1.1rem;
      font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
        DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
    }

    .grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      max-width: 800px;
      margin-top: 3rem;
    }

    .card {
      margin: 1rem;
      flex-basis: 45%;
      padding: 1.5rem;
      text-align: left;
      color: inherit;
      text-decoration: none;
      border: 1px solid #eaeaea;
      border-radius: 10px;
      transition: color 0.15s ease, border-color 0.15s ease;
    }

    .card:hover,
    .card:focus,
    .card:active {
      color: #0070f3;
      border-color: #0070f3;
    }

    .card h3 {
      margin: 0 0 1rem 0;
      font-size: 1.5rem;
    }

    .card p {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.5;
    }

    .logo {
      height: 1em;
    }

    @media (max-width: 600px) {
      .grid {
        width: 100%;
        flex-direction: column;
      }
    }
  `}</style>

  <style jsx global>{`
    html,
    body {
      padding: 0;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
        Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
        sans-serif;
    }

    * {
      box-sizing: border-box;
    }
  `}</style>
</div>
)
}

hello.js

import { NextApiRequest, NextApiResponse } from "next";

export default async (req, res) => {
if (req.method === 'POST') {
  console.log(req)
  console.log(req.body) 
} else {
  // Handle any other HTTP method
}
res.statusCode = 200
res.json({ trx_id: req.body.transaction_code })
}

package.json

{
"name": "learn-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export":"next export"
},
"dependencies": {
"next": "^10.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"urlencoded-body-parser": "^3.0.0"
 }
 }

When requested through fiddler, the following response returned,

Can anyone helps me to solve this problem??

** Update: Until now I failed to do it using static export. If its not possible in static files, then I'll look forward.

** Final Update: So after searching and trying many days, I come to the conclusion that nextjs static export cannot help me achieving this output. I took help of another dot net mvc app, which took the posted request, process the data and then redirect to my nextjs app through a GET request. As we use JWT token, authentication is no problem here. Thanks everyone for taking part in this thread.

Jalpa Panchal · Accepted Answer · 2020-11-16 05:22:35Z

1

+100

You get this 405 method not allowed error when the requested handler is not configured to disallow this POST verb.

YOu can follow the below steps to resolve the issue.

1)Open iis manager, select your site.

2)Double click on Handler Mappings.

3)Select StaticFile handler From there click "Request Restrictions" then "Verbs"

4)Make sure the appropriate verb is present in the text area or select all verbs.(In your case you need to add POST verb if it is not available)

Do the same thing for ExtensionlessUrlHandler-ISAPI-4.0 /_32bit /_64bit handler.

If you still face an issue you could try to remove the WebDAV Publishing iis feature.

answered Nov 16, 2020 at 5:22

Jalpa Panchal

13.1k2 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ayan_84 Over a year ago

I have done as you said. Webdev publishing isn't installed at all. But still the 405 problem exists.

Jalpa Panchal Over a year ago

@Ayan_84 API Routes are not supported by this method because they can't be prerendered to HTML. API Routes can't be used with next export you could refer to this link for more detail: link1 ,link2

Jalpa Panchal Over a year ago

@Ayan_84 If you find the reply is helpful I request you to mark the suggestion as an answer. This will help other people who face the same issue. Thanks for your understanding.

Ayan_84 Over a year ago

Its helpful but not actual solution, so I should not mark it as accepted answer. Rather , it guides me to find other solution, which solves the problem.

m3.b Over a year ago

@Ayan_84 What solution did you find?

|

Collectives™ on Stack Overflow

Next Js api static export return 405 in iis

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related