A statically generated landing page using Next.js and Plasmic
- Statically generated pages from your visual designs
- Development server on preview mode watches for changes from Plasmic Studio
Deploy your own
How to use
npx create-next-app --example cms-plasmic cms-plasmic-app # or yarn create next-app --example cms-plasmic cms-plasmic-app # or pnpm create next-app --example cms-plasmic cms-plasmic-app
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:
Step 3. Set up environment variables
.env.local.example file in this directory to
.env.local (which will be ignored by Git):
cp .env.local.example .env.local
Then replace the default env values in
.env.local with your project credentials:
NEXT_PUBLIC_PLASMIC_PROJECT_IDshould be the
projectIdvalue in step 2.
NEXT_PUBLIC_PLASMIC_PROJECT_API_TOKENshould be the API token gathered in previous step.
PLASMIC_PREVIEW_SECRETcan be any random string (but avoid spaces), like
MY_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
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:
Be sure to replace the secret with the chosen secret in Step 3 and pick a path to preview (e.g.
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:
Step 6. Deploy on Netlify
To deploy your local project, push it to GitHub/GitLab/Bitbucket and import to Netlify.
Important: When you import your project, make sure to click on Environment Variables and set them to match your
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!