How to publish a Next.js project to your hosting account

Programming, error messages and sample code > Node.js
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
 
Please follow the deployment instructions:
 

1. create a new Next.js project

npx create-next-app my-app

2. run the application in the development environment

By default, it will start the development server at
Local:    http://localhost:3000
API endpoint:    http://localhost:3000/api/hello
cd my-app
npm run dev

3. design your application, test it with the development server, prepare to deploy the application

npm run build

4. create app.js file under my-app folder

my-app\app.js
add the following code to app.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = false
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer((req, res) => {
        const parsedUrl = parse(req.url, true)
        handle(req, res, parsedUrl)
    }).listen(process.env.PORT, (err) => {
        if (err) throw err
    })
})
5. archive all the folders and files (include node_modules folder) under my-app folder to .zip file

6. upload the archived .zip file to your hosting account via File Manage or FTP client

7. unzip the .zip file to the target site path

8. enable nodejs application for the site path

9. change the web.config contents to

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <add name="iisnode" path="app.js" verb="*" modules="iisnode" />
        </handlers>
        <rewrite>
            <rules>
                <rule name="mysite">
                    <match url="/*" />
                    <action type="Rewrite" url="app.js" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

The final folder structure should be like:

site3/
|-- .next/
|-- node_modules/
|-- public/
|-- src/
    ...
|-- .env
|-- app.js
    ...
|-- next.config.js
|-- package.json
|-- web.config

10. access your site URL to check the application

 

Troubleshoot:

Error- [x1B][33mwarn[x1B][39m Attempted to load @next/swc-win32-x64-gnu, but it was not installed
- [x1B][33mwarn[x1B][39m Attempted to load @next/swc-win32-x64-msvc, but it was not installed
- [x1B][31merror[x1B][39m Failed to load SWC binary for win32/x64, see more info here: https://nextjs.org/docs/messages/faiLed-loading-swc
Description: Running "npm install" on an M1 Mac machine using Next.js and attempting to utilize the "node_modules" on a Windows machine.
Solution: execute the 'npm install' command on a Windows machine and subsequently upload the generated "node_modules" folder to the server.