feat: add support for Edge Functions (#1310)

* refactor: move into npm workspace

* fix: correct tsconfig

* chore: use plugin wrapper

* ci: always install using latest node

* feat: add edge support

* chore: don't use Next to lint demos

* fix: remove image redirect if using edge

* chore: move plugin into subdirectory

* chore: fix workspace

* chore: fix test

* chore: add typescript devdep

* fix: switch to early return for static assets

* chore: remove npmrc

* chore: update name

* chore: fix template path

* chore: revert unneeded changes

* ci: fix test script

* chore: regenerate package-lock

* chore: dedupe react

* chore: update demos

* chore: more devdeps for demos

* chore: add dep on plugin

Author: ascorbic

.eslintignore

@@ -2,4 +2,5 @@
 node_modules
 test
 lib
-demos
+demos
+plugin/src/templates/edge

.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
     'node/exports-style': 0,
     'node/global-require': 0,
     'node/prefer-global/process': 0,
+    // Allow a single word inline so that it can do language tags for syntax highlighting
+    // ['error', { ignorePattern: /^ (\w+) $/ }],
+    'no-inline-comments': 0,
     'no-magic-numbers': 0,
     'no-param-reassign': 0,
     'no-promise-executor-return': 0,

.github/workflows/test.yml

@@ -27,12 +27,11 @@ jobs:
       - uses: actions/checkout@v2
       - name: Installing with latest Node.js
         uses: actions/setup-node@v2
-        if: "${{ matrix.node-version != '*' }}"
         with:
           node-version: '*'
           check-latest: true
       - name: NPM Install
-        run: npm ci
+        run: npm install
       - name: Switching to Node.js ${{ matrix.node-version }} to run tests
         uses: actions/setup-node@v2
         if: "${{ matrix.node-version != '*' }}"
@@ -64,12 +63,11 @@ jobs:
       - uses: actions/checkout@v2
       - name: Installing with latest Node.js
         uses: actions/setup-node@v2
-        if: "${{ matrix.node-version != '*' }}"
         with:
           node-version: '*'
           check-latest: true
       - name: NPM Install
-        run: npm ci
+        run: npm install
       - name: Install Next.js Canary
         run: npm install -D next@canary --legacy-peer-deps
       - name: Switching to Node.js ${{ matrix.node-version }} to run tests

.prettierignore

@@ -20,4 +20,5 @@ node_modules
 # Test
 lib
 tsconfig.json
-demos/nx-next-monorepo-demo
+demos/nx-next-monorepo-demo
+plugin/src/templates/edge

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "deno.enablePaths": [
+    "plugin/src/templates/edge",
+    "demos/middleware/.netlify/edge-functions",
+    "demos/server-components/.netlify/edge-functions",
+  ],
+  "deno.unstable": true,
+  "deno.importMap": "demos/server-components/.netlify/edge-functions-import-map.json"
+}

demos/base-path/package.json

@@ -4,6 +4,9 @@
   "description": "",
   "devDependencies": {
     "@netlify/plugin-nextjs": "*",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.25",
     "husky": "^7.0.4",
     "if-env": "^1.0.4",
     "npm-run-all": "^4.1.5",

demos/default/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "next build"
   },
   "repository": {
     "type": "git",
@@ -18,10 +18,15 @@
   "homepage": "https://github.com/netlify/netlify-plugin-nextjs#readme",
   "dependencies": {
     "@reach/dialog": "^0.16.2",
-    "@reach/visually-hidden": "^0.16.0"
+    "@reach/visually-hidden": "^0.16.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@netlify/plugin-nextjs": "*",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.25",
     "husky": "^7.0.4",
     "if-env": "^1.0.4",
     "npm-run-all": "^4.1.5",

demos/middleware/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

demos/middleware/README.md

@@ -0,0 +1,29 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as
+[API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

demos/middleware/netlify.toml

@@ -0,0 +1,22 @@
+[build]
+command = "npm run build"
+publish = ".next"
+
+[environment]
+NEXT_USE_NETLIFY_EDGE = "true"
+
+[[plugins]]
+package = "../plugin-wrapper/"
+
+# This is a fake plugin, that makes it run npm install
+[[plugins]]
+package = "@netlify/plugin-local-install-core"
+
+[functions]
+included_files = [
+    "!node_modules/sharp/vendor/8.12.2/darwin-*/**/*",
+    "!node_modules/sharp/build/Release/sharp-darwin-*"
+]
+
+[dev]
+framework = "#static"