Updated with-magic example with new Environment Variables Support in Next.js 9.4+ (#13623)

examples/with-magic/.env.example

-MAGIC_PUBLISHABLE_KEY=
+NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=
 MAGIC_SECRET_KEY=

examples/with-magic/README.md

@@ -40,14 +40,13 @@ cp .env.example .env
 
 Then set each variable on `.env`:
 
-- `MAGIC_PUBLISHABLE_KEY` should look like `pk_test_abc` or `pk_live_ABC`
+- `NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY` should look like `pk_test_abc` or `pk_live_ABC`
 - `MAGIC_SECRET_KEY` should look like `sk_test_ABC` or `sk_live_ABC`
 
-To deploy on Vercel, you need to set the environment variables with **Now Secrets** using [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/now-cli#commands/secrets)).
+To deploy on Vercel, you need to set up the environment variables with the [Environment Variables UI](https://vercel.com/blog/environment-variables-ui) using the [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/cli#commands/env)).
 
-Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `<MAGIC_PUBLISHABLE_KEY>` and `<MAGIC_SECRET_KEY>` with the corresponding strings in `.env`:
+Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, link your project and run the following command to add the `NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY` and `MAGIC_SECRET_KEY` environment variables.
 
 ```bash
-now secrets add next_example_magic_publishable_key <MAGIC_PUBLISHABLE_KEY>
-now secrets add next_example_magic_secret_key <MAGIC_SECRET_KEY>
+vercel env add
 ```

examples/with-magic/next.config.js

-const nextEnv = require('next-env')
-const dotenvLoad = require('dotenv-load')
-
-dotenvLoad()
-
-const withNextEnv = nextEnv()
-
-module.exports = withNextEnv({
-  env: {
-    MAGIC_PUBLISHABLE_KEY: process.env.MAGIC_PUBLISHABLE_KEY,
-    MAGIC_SECRET_KEY: process.env.MAGIC_SECRET_KEY,
-  },
+module.exports = {
   devIndicators: {
     autoPrerender: false,
   },
-})
+}

examples/with-magic/now.json

-{
-  "env": {
-    "MAGIC_PUBLISHABLE_KEY": "@next_example_magic_publishable_key",
-    "MAGIC_SECRET_KEY": "@next_example_magic_secret_key"
-  },
-  "build": {
-    "env": {
-      "MAGIC_PUBLISHABLE_KEY": "@next_example_magic_publishable_key",
-      "MAGIC_SECRET_KEY": "@next_example_magic_secret_key"
-    }
-  }
-}

examples/with-magic/package.json

@@ -9,10 +9,8 @@
     "@hapi/iron": "6.0.0",
     "@magic-sdk/admin": "1.0.0",
     "cookie": "0.4.0",
-    "dotenv-load": "^2.0.0",
     "magic-sdk": "1.0.1",
     "next": "latest",
-    "next-env": "^1.1.1",
     "react": "latest",
     "react-dom": "latest",
     "swr": "0.1.16"

examples/with-magic/pages/login.js

@@ -21,7 +21,7 @@ const Login = () => {
     }
 
     try {
-      const magic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY)
+      const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY)
       const didToken = await magic.auth.loginWithMagicLink({
         email: body.email,
       })