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
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.
Article ID: 2233, Created: October 14, 2022 at 1:57 AM, Modified: January 24 at 9:23 PM