Get started with Next.js

You must first create a project in Plasmic.

To view this quickstart with all the IDs and token placeholders replaced with real values, open your project in Plasmic Studio and press the “Code” button in the top toolbar.

Overview

This covers integrating Plasmic into your existing Next.js codebase.

Want to quickly generate a new codebase with Plasmic already integrated? Use create-plasmic-app instead, or just press the Publish button in your project to push a new repo to GitHub!

Want to generate source code into your codebase? Learn about codegen.

Installation

Copy
npm install @plasmicapp/loader-nextjs
# or yarn add @plasmicapp/loader-nextjs

Initialization

Auto load all Plasmic pages

To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a Next.js catch-all page.

Render a single Plasmic page or component

Note: You can instead auto-load all Plasmic pages at the correct routes (recommended) rather than manually loading individual pages—see previous section.

Adding custom code components

Let your Plasmic Studio users drag/drop and visually manipulate any React component! (Learn more.)

Step 1

Create a simple example React component:

components/HelloWorld.tsx
Copy
import React, { ReactNode } from 'react';
export interface HelloWorldProps {
children?: ReactNode;
className?: string;
verbose?: boolean;
}
export function HelloWorld({ children, className, verbose }: HelloWorldProps) {
return (
<div className={className} style={{ padding: '20px' }}>
<p>Hello there! {verbose && 'Really nice to meet you!'}</p>
<div>{children}</div>
</div>
);
}

Step 2

Step 3

Create a host page at route /plasmic-host:

Step 4

Start your app:

Copy
npm run dev

And check that you see a confirmation message at http://localhost:3000/plasmic-host.

Step 5

Open https://studio.plasmic.app, click the menu for the current project, select "Configure project," and set it to http://localhost:3000/plasmic-host.

configure project menu

Step 6

Re-open this project (or reload this tab) to see your component listed in the insert menu!

insert code component

Later, after you deploy the route to production, update the project to use your production host URL instead, such as https://my-app.com/plasmic-host. This way, other members of your team (who can’t access your localhost dev server) will be able to open and edit the project in Plasmic. (Again, the /plasmic-host route itself is a special hidden route not meant for humans to visit; it is only for Plasmic Studio to hook into.)

Note: If you run next export rather than (say) hosting on Vercel, then by default it exports with .html suffixes (unlike the routes in the dev server), so you would get /plasmic-host.html in production. Either include the .html in your host URL, or suppress exporting with .html with trailingSlash: true in your next.config.js.

Learn more about code components.

Using Plasmic components in a shared layout

Shared layouts are useful for components such as navigation headers and footers. For example, you might have a NavHeader component designed in Plasmic and want to show it on all pages.

There’s much more to explore!

For example:

Continue learning in the full docs.

Was this page helpful?

Give feedback on this page