Flotiq Next.js setup cli

This CLI adds integration between your next page and flotiq account. Running it will:

• Let you log in and add FLOTIQ_API_KEY to your .env.local
• Generate SDK which will allow easier access to flotiq data
• Generate integration between sdk and nextjs by supporting draftMode. It also adds flotiq-content tags to each request against api.flotiq.com made with sdk
• Configure Content Preview plugin on your Flotiq account [wip]
• Allow you to integrate new or existing content type
• Allow you to create sample page that uses selected content type

Supported create-next-app options:

| Feature | Yes | No | | ----------------------------------------------- | --- | --- | | Next.js version >= 15 | ✅ | ❌ | | TypeScript? | ✅ | ✅ | | ESLint?* | - | - | | Tailwind CSS? | ✅ | ✅ | | code inside a src/ directory? | ✅ | ✅ | | App Router? | ✅ | ❌ | | Turbopack for next dev?* | - | - | | customized the import alias (@/* by default)? | ✅ | ✅ |

* Inconsequential - does not influence integration output

Usage

From local environment run yarn && yarn build before running commands

1. Run the following commands to create new Next.js project and integrate it with Flotiq:

npx create-next-app@latest <path-to-nextjs-project>
cd <path-to-nextjs-project>
npx flotiq-nextjs-setup
npm run dev

The CLI will configure Content Preview plugin and point it to your http://localhost:3000 environment.

2. Go to https://editor.flotiq.com and create new content objects
3. Use Content Preview plugin buttons to navigate either to preview, or published version of the object on your local environment.

Usage flow

Development

While developing, be sure to have yarn build:watch started to compile and check types on the flight.

Starting development is simple:

yarn
yarn build:watch

Prettier is mandatory and can be used as IDE plugin, or via command:

yarn codestyle # apply style fixes to all files in src

Next steps for users

Once integration is done, user developers can start work on their application. Once they have public instance available (stage/prod etc), they must:

• Update content preview plugin settings:
  • Change url to point to public instance
  • Update editor key to the same value as public instance FLOTIQ_CLIENT_AUTH_KEY variable.
• Create revalidation webhook:
  • type async
  • url: <Production url>/api/flotiq/revalidate
  • Header x-editor-key must have the same value as public instance FLOTIQ_CLIENT_AUTH_KEY variable.