History

Luc Leray f52955ec94 Clean up examples `package.json` (#27121 ) Clean up package.json files in the `examples` directory: - Add `private: true` - Remove `version` (because they are irrelevant for packages that are not meant to be published) - Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale) - Remove `author` - Remove `description` - Remove `license` Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408). ## Documentation / Examples - [x] Make sure the linting passes		2021-07-12 19:58:03 +00:00
..
pages	Upgrade to Prettier 2 (#13061 )	2020-05-18 15:24:37 -04:00
.babelrc	Include all files in Prettier (#17050 )	2020-09-14 02:53:19 +00:00
.gitignore	Added .gitignore to examples that are deployed to vercel (#15127 )	2020-07-16 10:52:23 -04:00
package.json	Clean up examples `package.json` (#27121 )	2021-07-12 19:58:03 +00:00
README.md	Simplify example usage instructions (#16678 )	2020-08-29 22:22:02 -04:00
server.js	Update proxy example to http-proxy-middleware ^1 (#13507 )	2020-05-28 21:00:58 +00:00

README.md

Reverse Proxy example

This example applies this gist https://gist.github.com/jamsesso/67fd937b74989dc52e33 to Nextjs and provides:

Reverse proxy in development mode by add http-proxy-middleware to custom server
NOT a recommended approach to production scale (hence explicit dev flag) as we should scope proxy as outside UI applications and have separate web server taking care of that.

Sorry for the extra packages. I belong to the minority camp of writing ES6 code on Windows developers. Essentially you only need http-proxy-middleware on top of bare-bone Nextjs setup to run this example.

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app
# or
yarn create next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app

What it does

Take any random query string to the index page and does a GET to /api/<query string> which gets routed internally to https://swapi.co/api/<query string>, or any API endpoint you wish to configure through the proxy.

Expectation

/api/people/2 routed to https://swapi.co/api/people/2 Try Reset

{
  "name": "C-3PO",
  "height": "167",
  "mass": "75",
  "hair_color": "n/a",
  "skin_color": "gold",
  "eye_color": "yellow",
  "birth_year": "112BBY",
  "gender": "n/a",
  "homeworld": "https://swapi.co/api/planets/1/",
  "films": [
    "https://swapi.co/api/films/2/",
    "https://swapi.co/api/films/5/",
    "https://swapi.co/api/films/4/",
    "https://swapi.co/api/films/6/",
    "https://swapi.co/api/films/3/",
    "https://swapi.co/api/films/1/"
  ],
  "species": ["https://swapi.co/api/species/2/"],
  "vehicles": [],
  "starships": [],
  "created": "2014-12-10T15:10:51.357000Z",
  "edited": "2014-12-20T21:17:50.309000Z",
  "url": "https://swapi.co/api/people/2/"
}