Next.js Starter Blog Setup Guide

This guide shows you how to get started quickly with a working Next.js site configured to a Plasmic project.

Create a new site

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

Start with a copy of our starter template repo, stored locally at blog-starter-app/.

Change directories into the site folder

cd blog-starter-app/

Clone the Plasmic “Starter Blog” project

Log into the dashboard and click on the “Starter Blog” tile to clone the project into your own workspace.

Copy your project ID

You’ll be redirected to your own copy of the Starter Blog project in Plasmic Studio.

We’ll come back to this. For now, just take note of your project ID in the URL.

For example, the project ID would be mFAsLqNxNEGutPWEihQds in the following:

https://studio.plasmic.app/projects/mFAsLqNxNEGutPWEihQds

Configure the Plasmic loader

As part of the starter project, we’ve already added @plasmicapp/loader as a dependency. To configure the loader to use your project, open next.config.js and update the plugin configuration with the project ID of your copy of Starter Blog.

const plasmic = require("@plasmicapp/loader/next");
const withPlasmic = plasmic({
  dir: __dirname, // The root directory of your project.
  projectIds: ["some-project-id"], // An array of project ids.});

module.exports = withPlasmic({
  // Your NextJS config.
});

Authenticate with Plasmic

If you do not yet have Plasmic credentials stored in ~/.plasmic.auth, you can easily authenticate your system by running the following:

npx -p @plasmicapp/cli -c "plasmic auth"

Start your development server

yarn dev
# or: npm run dev

As part of the development server, the Plasmic loader plugin will automatically sync your Plasmic components into a hidden folder .plasmic/, which we currently .gitignore.

Next.js will build your site and start a hot-reloading development environment. By default, this is accessible at http://localhost:3000.

For more commands, see the Next.js documentation.

Next steps

For a quick tour of what’s going on in the repository, check out the Starter Blog tour.

Or skip ahead to one of the guides to customize your website.