Skip to main content

Quickstart

Either download the code from your order confirmation email, or clone the repository as a template in GitHub.

Note: If you clone the repository, please make sure to keep the repository you created private.

Add your site to the /design-sync/config.js file. It should look something like this:

module.exports = {
site: `https://your-site.webflow.io/`,
removeBranding: true,
clientRouting: true,
optimizeImages: true,
optimizeJsLoading: true,
staticPageLimit: 200,
revalidate: false,
}

Install the dependencies for your project:

npm install
# or
yarn

Then run the bootstrap npm script to import your site:

npm run bootstrap
# or
yarn bootstrap

After your site is done importing, start up a live development server with:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

If your Webflow site changes, you can run the bootstrap npm script again to re-sync the Webflow content with your Next.js project.

You can add Next.js pages or API routes as you normally would with any other Next.js project. DesignSync.js will only display the Webflow page if there's not already a Next.js page for that route.