Next.js [JavaScript]

Next.js is a framework for server-render or statically-exported React apps. In this article, I would like to introduce basic knowledge for Next.js.

🐠 Install

cd /project/path/to/
# Install next and some libraries
yarn add next react react-dom

😀 Server Side Support for Clean URLs

Please add Express.js:

yarn add express

Then create a file server.js in your app and add following content:

const express = require("express");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
.then(() => {
const server = express();
// Support clean URLs
server.get("/p/:id", (req, res) => {
const actualPage = "/post";
const queryParams = { id: };
app.render(req, res, actualPage, queryParams);
server.get("*", (req, res) => {
return handle(req, res);
server.listen(3000, err => {
if (err) throw err;
console.log("> Ready on");
.catch(ex => {

In addtion, please add pages/post.js and write following code:

export default props => <h1>post page id: {} in next.js</h1>;

After modifying, please update package.json:

"scripts": {
"dev": "node server.js"

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!