We recommend using the automatic setup to explore Makeswift in a fresh Next.js app. If you have an existing Next.js app, you can use the manual installation guide.
You will need the following:
You don’t need an existing Makeswift account to get started with this guide.
Perform the following CLI command.
After you confirm, the CLI will create a new Next.js app in a directory with the project’s name.
The CLI then opens a new page in your browser where you will continue integrating your app.
The browser will prompt you to select a Makeswift site to connect to your local Next.js app. You may need to login or sign up, but the browser will redirect you to this page.
During this step, the Makeswift site API Key is stored as an environment variable inside your local .env.local file.
Make sure to check your console during the linking process. If the CLI fails to install dependencies you may need to install them manually.
The browser redirects you to the Makeswift Visual Builder once the integration is complete. If you skipped the template option, make sure to create a page.
You should find some new custom components in the toolbar.
These components will be located in the components folder of your Next.js app. You can explore the files ending with .makeswift.ts to learn more about registering components.
To learn how to use Makeswift builder, see the Help Center articles.