init

Author: stegano

.editorconfig

@@ -0,0 +1,21 @@
+# @see https://editorconfig-specification.readthedocs.io/en/latest/
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab

.gitignore

@@ -0,0 +1,29 @@
+# @see https://git-scm.com/docs/gitignore
+
+# `.DS_Store` is a file that stores custom attributes of its containing folder
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# Dependencies
+node_modules
+bower_components
+vendor
+
+# Caches
+.cache
+.npm
+.eslintcache
+
+# Temporaries
+.tmp
+.temp
+
+# Built
+dist
+target
+built
+output
+out

.templates/.editorconfig

@@ -0,0 +1,21 @@
+# @see https://editorconfig-specification.readthedocs.io/en/latest/
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab

.templates/.gitignore

@@ -0,0 +1,29 @@
+# @see https://git-scm.com/docs/gitignore
+
+# `.DS_Store` is a file that stores custom attributes of its containing folder
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# Dependencies
+node_modules
+bower_components
+vendor
+
+# Caches
+.cache
+.npm
+.eslintcache
+
+# Temporaries
+.tmp
+.temp
+
+# Built
+dist
+target
+built
+output
+out

.templates/template-sample-react-component/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import classNames from "classnames/bind";
+
+import styles from "./index.scss";
+
+const cx = classNames.bind(styles);
+
+function __templateNameToPascalCase__() {
+  return <div className={cx("__templateNameToParamCase__")}>Hello :)</div>;
+}
+
+export default __templateNameToPascalCase__;

.templates/template-sample-react-component/index.scss

@@ -0,0 +1,3 @@
+.__templateNameToParamCase__ {
+  display: inline-block;
+}

.templates/template-sample/index.js

@@ -0,0 +1,5 @@
+export default function __templateNameToPascalCase__() {
+  console.log("TemplateName -> __templateName__");
+  console.log("TemplateName to ParamCase -> __templateNameToParamCase__");
+  console.log("TemplateName to PascalCase -> __templateNameToPascalCase__");
+}

README.md

@@ -0,0 +1,49 @@
+# Next.js HTTP Proxy Middleware
+
+HTTP Proxy middleware available in API Middleware provided by Next.js.
+
+## Installation
+
+The easiest way to install `next-http-proxy-middleware` is with [npm](https://www.npmjs.com/).
+
+```bash
+
+npm install next-http-proxy-middleware
+
+```
+
+Alternately, download the source.
+
+```bash
+
+git clone https://github.com/stegano/next-http-proxy-middleware.git
+
+```
+
+## Features
+
+This middleware is implemented using the [`http-proxy`](https://www.npmjs.com/package/http-proxy) library. You can use the existing options provided by `http-proxy`. And you can rewrite the api path using `pathRewrite`, an additional option provided by this middleware.
+
+- [http-proxy options](https://www.npmjs.com/package/http-proxy#options)
+
+## Examples
+
+- Refer to the following for how to use Nextjs API Middleware
+
+  - [Next.js API Middlewares Guide](https://nextjs.org/docs/api-routes/api-middlewares)
+
+```typescript
+// pages/[...all].ts
+...
+export default (req: NextApiRequest, res: NextApiResponse) => (
+  isDevelopment
+    ? httpProxyMiddleware(req, res, {
+      target: 'https://www.example.com',
+      pathRewrite: {
+        '^/api/new': '/v2', // `/api/new/test` -> `/v2/test`
+        '^/api': '', // `/api/test` -> `/test`
+      },
+    })
+    : res.status(404).send(null)
+);
+```

build/index.js

@@ -0,0 +1,60 @@
+{
+  "name": "next-http-proxy-middleware",
+  "version": "1.0.0",
+  "description": "Nextjs HTTP Proxy Middleware",
+  "main": "template.config.js",
+  "scripts": {
+    "test": "jest",
+    "build": "rollup -c ./rollup.config.js"
+  },
+  "author": "Yongwoo Jung<stegano@naver.com>",
+  "dependencies": {
+    "@types/http-proxy": "1.17.3",
+    "@types/jest": "^25.1.3",
+    "@types/next": "^9.0.0",
+    "http-proxy": "^1.18.0",
+    "jest": "^25.1.0",
+    "rollup": "^1.31.1",
+    "rollup-plugin-typescript2": "^0.26.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "ts-jest": "^25.2.1",
+    "typescript": "^3.8.2"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.ts$": "ts-jest"
+    },
+    "testRegex": "\\.test\\.ts$",
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
+    "globals": {
+      "ts-jest": {
+        "enableTsDiagnostics": true
+      }
+    }
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stegano/next-http-proxy-middleware/issues"
+  },
+  "keywords": [
+    "reverse",
+    "proxy",
+    "middleware",
+    "http",
+    "https",
+    "connect",
+    "express",
+    "websocket",
+    "ws",
+    "cors",
+    "next",
+    "next.js"
+  ],
+  "homepage": "https://github.com/stegano/next-http-proxy-middleware#readme",
+  "engines": {
+    "node": ">=10.0.0"
+  }
+}

package-lock.json

@@ -0,0 +1,11 @@
+import typescript from "rollup-plugin-typescript2";
+import { uglify } from "rollup-plugin-uglify";
+
+export default {
+  input: "./src/index.ts",
+  output: {
+    file: "./build/index.js",
+    format: "cjs"
+  },
+  plugins: [typescript(), uglify()]
+};

package.json

@@ -0,0 +1,4 @@
+import { ServerOptions } from "http-proxy";
+export interface NextHttpProxyMiddlewareOptions extends ServerOptions {
+  pathRewrite?: { [key: string]: string };
+}

rollup.config.js

@@ -0,0 +1,13 @@
+import { rewritePath } from "./index";
+
+describe("Test `rewritePath` functionn ", () => {
+  test("Replace root URI context", () => {
+    const originUrl = "/api/a/b";
+    expect("/auth/a/b").toEqual(rewritePath(originUrl, { "/api": "/auth" }));
+  });
+
+  test("Remove root URI context", () => {
+    const originUrl = "/api/a/b";
+    expect("/auth/a/b").toEqual(rewritePath(originUrl, { "/api": "/auth" }));
+  });
+});

src/index.d.ts

@@ -0,0 +1,56 @@
+import { NextApiResponse, NextApiRequest } from "next";
+import httpProxy from "http-proxy";
+import { NextHttpProxyMiddlewareOptions } from "./index.d";
+
+/**
+ * @see https://www.npmjs.com/package/http-proxy
+ */
+const proxy: httpProxy = httpProxy.createProxy();
+
+/**
+ * If a key pattern is found in `pathRewrite` that matches the url value,
+ * replace matched string of url with the `pathRewrite` value.
+ * @param req
+ * @param pathRewrite
+ */
+export const rewritePath = (
+  url: string,
+  pathRewrite: { [key: string]: string }
+) => {
+  for (let patternStr in pathRewrite) {
+    const pattern = RegExp(patternStr);
+    const path = pathRewrite[patternStr];
+    if (pattern.test(url as string)) {
+      return url.replace(pattern, path);
+    }
+  }
+  return url;
+};
+
+/**
+ * Next.js HTTP Proxy Middleware
+ * @see https://nextjs.org/docs/api-routes/api-middlewares
+ * @param {NextApiRequest} req
+ * @param {NextApiResponse} res
+ * @param {NextHttpProxyMiddlewareOptions} httpProxyOptions
+ */
+const httpProxyMiddleware = async (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  httpProxyOptions: NextHttpProxyMiddlewareOptions = {}
+) =>
+  new Promise((resolve, reject) => {
+    const { pathRewrite } = httpProxyOptions;
+    if (pathRewrite) {
+      req.url = rewritePath(req.url as string, pathRewrite);
+    }
+    proxy
+      .once("proxyRes", resolve)
+      .once("error", reject)
+      .web(req, res, {
+        changeOrigin: true,
+        ...httpProxyOptions
+      });
+  });
+
+export default httpProxyMiddleware;

src/index.test.ts

@@ -0,0 +1,31 @@
+/**
+ * This file is a configuration file generated by the `Template` extension on `vscode`
+ * @see https://marketplace.visualstudio.com/items?itemName=yongwoo.template
+ */
+module.exports = {
+  // You can change the template path to another path
+  templateRootPath: "./.templates",
+  // After copying the template file the `replaceFileTextFn` function is executed
+  replaceFileTextFn: (fileText, templateName, utils) => {
+    // @see https://www.npmjs.com/package/change-case
+    const { changeCase } = utils;
+    // You can change the text in the file
+    return fileText
+      .replace(/__templateName__/gm, templateName)
+      .replace(
+        /__templateNameToPascalCase__/gm,
+        changeCase.pascalCase(templateName)
+      )
+      .replace(
+        /__templateNameToParamCase__/gm,
+        changeCase.paramCase(templateName)
+      );
+  },
+  replaceFileNameFn: (fileName, templateName, utils) => {
+    const { path } = utils;
+    // @see https://nodejs.org/api/path.html#path_path_parse_path
+    const { base } = path.parse(fileName);
+    // You can change the file name
+    return base;
+  }
+};

src/index.ts

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "outDir": "build",
+    "sourceMap": false,
+    "strict": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}