This repository is a full-stack sample web application based on Next.js that creates a simple whole-website architecture, and provides the foundational services, components, and plumbing needed to get a basic web application up and running.
- Scheme
- File Structures
- Getting Started
- Further Help
- Contributing
- Supported development environment
- Changelog
- Licensing
List my progress here:
Function Block | Supports |
---|---|
Navigation | ✅ |
Parameter Acquisition | ✅ |
Pagination | ✅ |
Basic Components | ✅ |
Exporting Pure HTML Static Files | ✅ |
Authorization | ✅ |
Login | ✅ |
Register | ✅ |
Network Requests | ✅ |
Routes Demo | ✅ |
API Demo | ✅ |
CURD Demo | ✅ |
JWT Demo | ✅ |
Dynamic Routes Demo | ✅ |
File Import | ✅ |
SEO Premium | ✅ |
Static Pages | ✅ |
Incremental Static Regeneration | ✅ |
Remote Download | ✅ |
Fully Static HTML Files Generation | ✅ |
Custom Server | ✅ |
Custom Hooks (auth, redux, etc.) | ✅ |
Frontend Page Interacts With Node | ✅ |
Alias Support | ✅ |
Local PHP Service Association | ✅ |
Server Deployment | ✅ |
Deploy Using Docker | ✅ |
Redux Supplement (for navigation) | ✅ |
Redux SSR (for homepage) | ✅ |
WebSocket Support via socket.io |
✅ |
Additional Node.js Services | ✅ |
Request Cache Demo | ✅ |
Authentication of Microservices | ✅ |
End-to-end typesafe API (gRPC) | |
React UI Components Libraries |
fullstack-nextjs-app-template/
├── README.md
├── CHANGELOG.md
├── LICENSE
├── next.config.js
├── server.js
├── ecosystem.config.js
├── middleware.ts
├── tsconfig.json
├── package-lock.json
├── package.json
├── .dockerignore
├── Dockerfile
├── docker-compose.yml
├── out/
├── backend/
├── scripts/
├── public/
├── pages/
│ ├── api/
│ └── *.tsx
├── src/
│ ├── config/
│ ├── data/
│ ├── contexts/
│ ├── interfaces/
│ ├── components/
│ ├── styles/
│ ├── utils/
│ └── store/
└──
Make sure if NODEJS is installed on your computer.
$ npm install
It will create node_module
folder in this all dependency files will be install with this command.
$ npm run dev
With is command file will be compiled and it will be loaded on local server http://localhost:3000.
$ npm run build
Note: Defer generating all pages on-demand by this command. You can have faster builds by generating all pages on-demand for previews (but not production builds). This is helpful for sites with hundreds/thousands of static pages.
$ npm run build:static
This build mode will generate static data.
$ npm run start
Please install php on your computer first.
$ npm run action:phpserver
Please use a PHP server environment with a local port of 4000, check the file at ./backend/server-php.js
production mode:
$ npm run build # this command must be run first
$ npm run deploy:prod
development mode:
$ npm run deploy:dev
(If it doesn't work because of Node permission, use the following commands)
$ npm run destroy
FIrst, you need to enable Static Exports.
Warning
ISR cannot be used with "output: export".
Step 1. generate static resources:
$ npm run export
Step 2. fix name for HTML files:
$ npm run export:fix
Step 3. preview the static site
Then, test the generated static website (the HTML static website is located in the directory .out/
). Access using the URL http://localhost:12345
$ npm run export:test
📌 Note: Using server.js may cause an error during [HMR] restart (first loading of the client): WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: --> InvalidArgumentError: invalid upgrade header You can ignore it.
Create a new file server.js
(do not use .ts
) at the same level as your pages
directory. Take a look at the following example of a custom server:
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
let dev = process.env.NODE_ENV !== 'production';
dev = false; // need run `npm run build` first
const hostname = 'localhost';
const port = 3000;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
await app.render(req, res, '/a', query)
} else if (pathname === '/b') {
await app.render(req, res, '/b', query)
} else {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
}).listen(port, (err) => {
if (err) throw err
console.log(`> Ready on http://${hostname}:${port}`)
})
})
Modify the file server.js
, use https.createServer([options][, requestListener]) to wrap the express service, please check out the sample code below:
// Supprt HTTPS
const fs = require('fs');
const path = require('path');
const https = require('https');
const cert = fs.readFileSync(path.join(__dirname,'../../path/bundle.crt'));
const key = fs.readFileSync(path.join(__dirname,'../../path/ca.key'));
const options = {key: key, cert: cert };
app.prepare().then(() => {
https.createServer(options, async (req, res) => {
try {
...
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
}).listen(port, (err) => {
if (err) throw err
console.log(`> Ready on https://${hostname}:${port}`)
})
})
access with https://localhost:3000
or https://{YOUR_IP}:3000
To run the custom server you'll need to update the scripts in package.json like so:
"scripts": {
"dev": "node server.js",
"start": "NODE_ENV=production node server.js"
}
(Optional). Disabling file-system routing
module.exports = {
useFileSystemPublicRoutes: false,
}
Start Next.js application with PM2 as a service (only works if you are using Node v18.17.0 or above.)
Node14+ version will be installed here
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version #v14.16.1
$ npm --version #6.14.12
$ sudo npm install pm2@latest -g
#into your `"fullstack-nextjs-app-template/"` folder directory.
$ cd /{your_directory}/fullstack-nextjs-app-template
#run app
$ pm2 start ecosystem.config.js
#other commands
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logs
$ pm2 start npm --name "fullstack-nextjs-app-template" -- start
destroy process:
$ pm2 stop "fullstack-nextjs-app-template" & pm2 delete "fullstack-nextjs-app-template"
3.5) Detect available init system, generate configuration and enable startup system, and you can check the status of the same using
$ pm2 startup
$ systemctl status pm2-root
$ pm2 start /{your_directory}/fullstack-nextjs-app-template/ecosystem.config.js --restart-delay=3000
$ pm2 save
💡 Some solutions to problems that may occur when deploying the application with NPM or PM2 on cloud server:
a)The
build
ordev
command failsWhen on an M1 Mac and switching from a Node.js version without M1 support to one with, e.g. v14 to v16, you may need a different swc dependency which can require re-installing
node_modules
(npm i --force or yarn install --force).$ npm i --force # This can be ignored if you can build $ rm -rf /{your_directory}/fullstack-nextjs-app-template/.next # Delete the. Next folder $ npm run build $ pm2 start ecosystem.config.jsMake sure your server has directory and file permissions to run the project
b)ERROR: permission denied, access '/usr/lib/node_modules'
Solution:
$ chmod -R a+x node_modulesc)ERROR: JavaScript heap out of memory
There is a strict standard limit for memory usage in V8 to be a maximum of ~1GB (32-bit) and ~1.7GB (64-bit), if you do not increase it manually.
Solution:
export NODE_OPTIONS=--max_old_space_size=4096
d) Error: EACCES: permission denied, mkdir '/root/.pm2/xxxx'
Solution:
In general, just avoid using
NPM
to run PM2 commands.You could still try the following:
Make sure you kill any PM2 instance before starting PM2 in no deamon mode (pm2 kill).
# re-install PM2 (optional) $ sudo npm i -g pm2 # if pm2 was reinstalled, ts-node must be reinstalled (optional) $ sudo npm install -g ts-node@latest # clear all pm2 instances $ pm2 kill # then restart it $ pm2 start xxxxxx
You had created a basic Next.js App from here, then you need to deploy a Next.js App on Apache or Nginx web server. Please refer to the network for the tutorial on setting up the proxy.
Now that the app is ready to be deployed, we should prepare the Nginx end. In case Nginx is not installed, it can be easily installed with the apt packaging system by running the following two commands:
$ sudo apt update
$ sudo apt install nginx
or
$ sudo yum install nginx -y
Start Nginx:
$ systemctl start nginx
Start at boot:
$ systemctl enable nginx
Set Up a Firewall Using FirewallD on CentOS 8:
$ firewall-cmd --permanent --zone=public --add-service=http
$ firewall-cmd --permanent --zone=public --add-service=https
$ firewall-cmd --permanent --zone=public --add-port=3000/tcp
$ firewall-cmd --reload
$ systemctl restart nginx
We can check if Nginx is running on the system:
$ systemctl status nginx
Alright, now that the Nginx service has successfully started running, we can go ahead and modify the configuration file found at /etc/nginx/conf.d/default.conf
. This is where we will point the domain to fire up the correct Next.js application:
$ vi /etc/nginx/conf.d/default.conf
At the end of the file, add:
server {
listen 443 ssl;
server_name backend1.example.com;
...
location / {
proxy_set_header Host $http_host;
proxy_pass http://{YOUR_IP}:3000;
}
}
After adding these lines to the file, we need to restart the Nginx service:
$ systemctl restart nginx
There probably won’t be any messages if the service restarted successfully. Otherwise, it will spit out lines of error messages.
run the following command
$ killall -9 node
To change your Site Favicon, navigate the file pages/_document.tsx
and modify the code between <Head>
In your package.json file, add -p 8080 to the dev/start scripts to start the server on port 8080:
"scripts": {
"dev": "next -p 8080",
"start": "next start -p 8080"
}
Alternatively, if you don't want to hardcode this in the package.json file, you could start the script with ENV variable PORT.
$ PORT=8080 npm run dev
Change the root directory of the website so that it can be used when you upload the project to another directory. Modify the key siteUrl
of the ./src/data/app.json
.
If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog". (no trailing slash)
{
"siteUrl": "http://localhost:3000",
"copyright": "xxxxxxxxxx"
}
⚠️ Tips: When running thegetServerSideProps
of Next.js,Express
andWebSocket
services of Node.js, the communication would be container to container. So for these requests, routes to localhost (http://localhost:3000
) would not work. Instead it would need to be something likehttp://localhost:7777
instead (when communicating from the frontend service to the backend service). The localhost domain would work as expected on the client side requests.
⚠️ Warning: Multiple micro-service containers cannot be opened on the server side at the same time, otherwise the upstream server will terminate the WebSocket connection.When you run this without docker everything works because all services are on localhost. When run via docker-compose they no longer are.
👣 (Step 1) First download docker (version Intel chip, note. macOs10.14 and below versions use up to version 4.11.0)
https://docs.docker.com/desktop/release-notes/#4110
install docker on ubuntu
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
$ sudo docker run hello-world
$ cd /Applications/MAMP/htdocs/fullstack-nextjs-app-template
$ touch Dockerfile
$ vi Dockerfile
the following:
…
👣 (Step 3) To add support for Docker to an existing project, simply copy the Dockerfile to the root of the project and add the following to the next.config.js
file:
You can directly set the dockerDeploymentEnabled
property to true
in the current next.config.js
.
[!NOTE] Use Docker container, don't use Static Exports.
// next.config.js
module.exports = {
// ... rest of the configuration.
output: 'standalone',
}
Syntax: docker build [OPTIONS] PATH | URL | -
! ! ! Note: The last path is a point, don't miss it
$ docker build -t fullstack-nextjs-app-template:v1 .
[The first deployment takes a few minutes because it needs other docker libraries, and it only takes tens of seconds after that]
👣 (Step 5) Run your application. Based on the tags you gave your Dockerfile, you can now run them with the docker run command.
The -p flag exposes the container's ports to services outside of docker (the first port is the port exposed to the outside). Use of multiple ports: docker run -p <host_port1>:<container_port1> -p <host_port2>:<container_port2>
Run your container:
$ docker run -p 3000:3000 fullstack-nextjs-app-template:v1
NOTE:
If Ctrl+C does not work to terminate the container, please add the following code in the server file such as Express, and use the following command to temporarily run the container. Access Specify an init process
// Stop running node in docker with Ctrl+C sends the SIGINT signal. // Usage: docker run --init -p <host_port>:<container_port> <image_name:version> const process = require('process'); process.on('SIGINT', () => { console.info("Interrupted") process.exit(0); });$ docker run --init -p <host_port>:<container_port> <image_name:version>
Run the image with -d to run the container in detached mode, leaving the container running in the background. The -p flag redirects the public port to a private port inside the container.
$ docker run -p 3000:3000 -d fullstack-nextjs-app-template:v1
$ docker ps
$ docker stop <PID>
$ docker kill <PID>
The process already exists, to delete, for example, port 3000
#Query the process of port 3000
$ lsof -i tcp:3000
#PID is replaced by the id of the process
$ kill -9 <PID>
Note: change the
192.168.1.140
to yours
Otherwise, an error will be reported:
docker: Error response from daemon: Mounts denied:
(2)Install and run docker-registry
Sometimes it may be inconvenient to use a public repository like Docker Hub, and users can create a local repository for private use. For example, an image built based on a company's internal project.
docker-registry
is an official tool that can be used to build a private image.
It can be run by obtaining the official Registry. By default, the repository will be created in the container's /var/lib/registry
directory (for Linux or Mac), and now I reset it to a shared directory on my computer.
docker run --name registry -d -p 5000:5000 --restart=always -v /Users/changcheng/Desktop/share:/var/lib/registry registry
access:http://192.168.1.140:5000/v2/
Indicates that port 5000
has been successfully proxied by docker.
$ docker tag fullstack-nextjs-app-template:v1 192.168.1.140:5000/fullstack-nextjs-app-template-v1
push it
$ docker push 192.168.1.140:5000/fullstack-nextjs-app-template-v1
In case of error:
http: server gave HTTP response to HTTPS client
Please configure registry-mirrors
image sources and insecure-registries
private repositories in Docker Desktop
Modify daemon.json
(can be modified directly through the Docker Desktop)
$ cat ~/.docker/daemon.json
Add the following configuration:
{
"registry-mirror":[
"http://hub-mirror.c.163.com"
],
"insecure-registries":[
"192.168.1.140:5000"
]
}
restart docker
$ docker pull 192.168.1.140:5000/fullstack-nextjs-app-template-v1
View the container that is running in the background (note that you need to run it first to find the id)
$ docker ps
To package the running docker container into an image image, run docker commit <container_id> <image_name:version>
$ docker commit 16cb27979742 fullstack-nextjs-app-template:v1
Next, save the newly packaged image as a tar file, run docker save <image_name:version> -o <path_name>
$ docker save fullstack-nextjs-app-template:v1 -o ./fullstack-nextjs-app-template-v1.tar
services:
web:
build: .
ports:
- "3000:3000"
depends_on:
- my_node_service
my_node_service:
image: "my-node-server:v1"
ports:
- "4001:4001"
# build
$ docker build -t my-node-server:v1 .
# test
$ docker run --init -p 4001:4001 my-node-server:v1
$ docker-compose up
Solution 1:
Using k8s with load balancing, without nginx. Config the sessionAffinity on service:
service.spec.sessionAffinity = "ClientIP"
Solution 2:
Adding transports: ['websocket'] to socketIOClient options in our multi-pod Kubernetes environment:
socketIOClient(someUrl, {transports: ['websocket']});
Refer to: Using multiple nodes
a) Has node_modules
folder, just do it directly.
If running npm run <script>
fails because Node has been upgraded, use npx -p node@<version> <your_script>
to run:
such as
$ npx -p [email protected] npm run dev
$ npx -p [email protected] npm run start
b) If there is no node_modules
folder, using npm install --legacy-peer-deps
is still unsuccessful. After deleting the dependencies of package.json and remove file package-lock.json, use the following command to reinstall:
$ npm install <package1> <package2> --legacy-peer-deps
$ npm install --save-dev <package1> <package2> --legacy-peer-deps
c) NPM or NPX cache error
View the location of the local npm cache:
$ npm config get cache
Clear cache (npm and npx)
$ npm cache clean --force
or
$ rm -rf ~/.npm
Check cache
$ npm cache verify
- Next.js 13.0.0 to 14+
- React 18 +
- TypeScript 4.x.x +
- Express 4.x.x
Licensed under the MIT.