Jam BalayaandGitHub
36dce2fe7e
### Description Follow up #35349. 1. Update the [example template](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) with [StackBlitz](https://stackblitz.com/) preview 2. Add `preview live with StackBlitz` to the examples 3. Remove the below old StackBlitz preview section from the examples ```md ## Preview Preview the example live on [StackBlitz](http://stackblitz.com/): [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name) ``` CC: @samcx ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
Magic Example
This example shows how to use Magic with Next.js. The example features cookie-based, passwordless authentication with email-based magic links.
The example shows how to do a login and logout; and to get the user info using a hook with SWR.
A DB is not included. But you can add any DB you like!.
The login cookie is httpOnly, meaning it can only be accessed by the API, and it's encrypted using @hapi/iron for more security.
Deploy your own
Once you have access to the environment variables you'll need, deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-magic with-magic-app
yarn create next-app --example with-magic with-magic-app
pnpm create next-app --example with-magic with-magic-app
Configuration
Login to the Magic Dashboard and get the keys of your application
Next, copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):
cp .env.local.example .env.local
Then set each variable on .env.local:
NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEYshould look likepk_test_abcorpk_live_ABCMAGIC_SECRET_KEYshould look likesk_test_ABCorsk_live_ABCTOKEN_SECRETshould be a string with at least 32 characters
Now, run Next.js in development mode
npm run dev
# or
yarn dev
# or
pnpm dev
Your app should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.
Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
Deploy Your Local Project
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.
Deploy from Our Template
Alternatively, you can deploy using our template by clicking on the Deploy button below.