This connector is only available for Next.js TypeScript web build tasks.
What you can do
Blog or content site
Publish articles, tutorials, and news posts managed entirely through Directus.
Product catalog
Display products with images, descriptions, pricing, and variant options from Directus.
Multi-language site
Serve content in multiple languages using Directus translations with a language switcher.
FAQ or knowledge base
Searchable help center powered by Directus content, grouped by category.
Rich media collections
Image-heavy collections like projects, case studies, or creative work with filtering and detail views.
Before you connect
You need a running Directus instance and an access token.Get your Directus access token from the Directus documentation.
- Open your Directus project and go to your User Profile.
- Scroll to the Token field and click Generate New Token.
- Copy the token and note your project URL (e.g.,
https://your-project.directus.app).
Connect Directus
- Web Browser
- Mobile App
You can connect from two places. Both do the same thing.Option 1: From chatType a prompt that mentions Directus, for example 
Connect Directus and build a blog listing page from my articles collection. Rocket detects the intent and shows a Connect button inline. Click it to open the credentials popup.... button in the preview toolbar, then select Connectors.Example prompts
| What you want | Prompt to use |
|---|---|
| Blog listing | Show all articles from my Directus posts collection with thumbnails and publish dates. |
| Detail page | When a user clicks an article, open a detail page with the full rich-text body from Directus. |
| Product catalog | Create a product grid from my Directus products collection with images, prices, and a detail modal. |
| Multi-language | Add a language switcher that toggles content between English and Spanish from Directus translations. |
| FAQ page | Build an FAQ accordion from my Directus faqs collection, grouped by category. |
| Search | Add a full-text search bar to my Directus-powered blog listing page. |
| Media gallery | Display images from my Directus media collection in a responsive grid with lightbox preview. |
| Filtered listing | Show Directus products filtered by category with a sidebar navigation. |
| Pagination | Add pagination to my Directus blog listing, showing 10 posts per page. |
| Admin view | Create a simple admin table for my Directus collection with inline editing and a delete button. |
Tips
- Choose token permissions carefully. The access token inherits the permissions of the Directus user that generated it. Use a dedicated service account with scoped permissions for production apps.
- Your access token is stored securely. Rocket encrypts it at rest and never exposes it in client-side code.
- Directus must be publicly reachable. Local-only instances will not work. Your Directus URL must be accessible from the internet.
- Deleting content must happen in Directus. Rocket can create and update records, but content and asset deletion should be managed directly in your Directus admin panel.
- One Directus project per Rocket project. Each Rocket project connects to one set of credentials. Use different Rocket projects for different Directus instances.
- Licensing. Directus is licensed under BSL 1.1. Organizations with over $5 million in total finances require a commercial license. Smaller organizations and individuals can use Directus commercially without a license.
What’s next?
Strapi
Comparing headless CMS options? See how Strapi works with Rocket.
Supabase
Pair Directus content with Supabase auth and user management.
Resend
Send notification emails when new content is published from Directus.
Netlify
Deploy your Directus-powered site to Netlify with one prompt.