Develop a NextJS application with Wazaterm

This section describes how to develop NextJS using Wazaterm.

What you need

PC connected to the Internet
Browser
Unix environment or software that can do SSH Local Port Forwarding (autossh recommended) that comes with OS.

1. Start Wazaterm

Start Wazaterm with referring to this article.

2. Install nvm

Install node by using nvm.

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ vi ~/.bashrc
# add below
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
$ nvm install node
$ nvm use node
$ node -version

3. Create NextJS project

$ npx create-next-app@latest
npx: installed 1 in 1.93s
✔ What is your project named? ... my-app
Creating a new Next.js app in /tmp/my-app.
..

4. Start a NextJS development server

$ cd my-app
$ yarn dev

Port 3000 will be used, so if you want to change the port used, change package.json.

"scripts": {
  "dev": "next dev --port 8000",

5. Local port forwarding using autossh on the PC at hand

$ autossh -M 50100 -NT -o "ServerAliveInterval 60" -o TCPKeepAlive=yes -o "ServerAliveCountMax 120 -L 8000:localhost:8000 username@hostname.wazaterm.com &