A statically generated blog example using Plasmic, Next.js and Markdown

This example showcases using Plasmic with Next.js's Static Generation feature using Markdown files as the data source.

The blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.

To create the blog posts we use remark and remark-html to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.

Demo

https://plasmic-nextjs-starter-blog.netlify.app/

🚀 Quick start

1. Create a Next.js site.

   Execute create-next-app with npm or Yarn to bootstrap the example:

   yarn create next-app --example https://github.com/plasmicapp/nextjs-starter my-app
   # or
   npx create-next-app --example https://github.com/plasmicapp/nextjs-starter my-app
   
   cd my-app/

2. Authenticate with Plasmic

   Run the following to authenticate your system

   npx -p @plasmicapp/cli plasmic auth

3. Clone a Plasmic project starter

   Log into Plasmic, click on "New Project", and clone one of the starter projects into your own workspace. We recommend the "Starter Blog" project.

   

   When you do, note the PROJECT_ID in the URL (e.g. https://studio.plasmic.app/projects/PROJECT_ID). Please check that you have write-access to the project, otherwise you may be referencing read-only components.

   Note: This should work with any other website template, but you may need to delete containerContents in index.js. This relies on ListItem, which only exists for the Starter Blog.

4. Configure PlasmicLoader.

   Open next.config.js and update the plugin configuration for @plasmicapp/loader with the project ID of your newly cloned project.

   const plasmic = require("@plasmicapp/loader/next");
   const withPlasmic = plasmic({
     projects: ["PROJECT_ID"], // An array of project to sync.
   });
   
   module.exports = withPlasmic({
     // Your NextJS config.
   });

How to use

Your website should be up and running on http://localhost:3000! If it doesn't work, ask for help on our community Slack.

Deploy it to the cloud with Vercel (Documentation).

Learning Plasmic

• Full Plasmic documentation lives at our learning portal.
• **For most developers, we recommend starting with our quickstart.

To deploy with Netlify

We already have a default netlify.toml config file for you. Remember to go into your Netlify project settings and set the following environment variables:

• PLASMIC_AUTH_USER
• PLASMIC_AUTH_TOKEN

Reference