b7871953b2
## What? The `@plasmicapp/loader-nextjs` was outdated and doesn't work with the latest version of Next.js. <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Improving Documentation - Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### Adding or Updating Examples - The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ### Adding a feature - Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. (A discussion must be opened, see https://github.com/vercel/next.js/discussions/new?category=ideas) - Related issues/discussions are linked using `fixes #number` - e2e tests added (https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) - Documentation added - Telemetry added. In case of a feature if it's used or not. - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md ## For Maintainers - Minimal description (aim for explaining to someone not on the team to understand the PR) - When linking to a Slack thread, you might want to share details of the conclusion - Link both the Linear (Fixes NEXT-xxx) and the GitHub issues - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Closes NEXT- Fixes # --> Closes NEXT-2675 |
||
---|---|---|
.. | ||
pages | ||
public | ||
styles | ||
.env.local.example | ||
.gitignore | ||
next-env.d.ts | ||
next.config.js | ||
package.json | ||
plasmic-init.ts | ||
README.md | ||
tsconfig.json |
A statically generated landing page using Next.js and Plasmic
This example showcases Next.js's Static Generation feature using Plasmic as the visual page builder.
You'll get:
- Statically generated pages from your visual designs
- Development server on preview mode watches for changes from Plasmic Studio
Demo
https://nextjs-plasmic-example.vercel.app/
Deploy your own
Once you have access to the environment variables you need, deploy the example using Vercel:
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example cms-plasmic cms-plasmic-app
yarn create next-app --example cms-plasmic cms-plasmic-app
pnpm create next-app --example cms-plasmic cms-plasmic-app
Configuration
Step 1. Create an account and a project on Plasmic
First, create an account on Plasmic.
After creating an account, create a new project.
Step 2. Gather your project ID and API token
Once you've opened your Plasmic project, you can find the project ID in the URL: https://studio.plasmic.app/projects/PROJECTID
.
The API token can be found by clicking the Code button in the top bar.
Step 3. Set up environment variables
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_PLASMIC_PROJECT_ID
should be theprojectId
value in step 2.NEXT_PUBLIC_PLASMIC_PROJECT_API_TOKEN
should be the API token gathered in previous step.PLASMIC_PREVIEW_SECRET
can be any random string (but avoid spaces), likeMY_SECRET
- this is used for Preview Mode.
Step 4. Run Next.js in development mode
npm install
npm run dev
# or
yarn install
yarn dev
Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.
Step 5. Try preview mode
By default, the code is set up to only build published Plasmic projects. If you want to see changes as you make them in the Plasmic Studio, enter preview mode by opening the following URL:
http://localhost:3000/api/preview?secret=PLASMIC_PREVIEW_SECRET&slug=PATH
Be sure to replace the secret with the chosen secret in Step 3 and pick a path to preview (e.g. http://localhost:3000/api/preview?secret=123456&slug=/
)
Now you can make edits in the Studio and see them reflected in the development server live.
You can exit preview mode at any time by going to the following URL:
http://localhost:3000/api/exit-preview
Step 6. Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
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.
Next steps:
With Plasmic, you can enable non-developers on your team to publish pages and content into your website or app.
To learn more about Plasmic, take a look at the following resources:
You can check out the Plasmic GitHub repository - your feedback and contributions are welcome!