These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

Why Use TanStack Start Framework?

TanStack Start introduces several enhancements that aim to improve developer workflow and application performance. Here's a breakdown:

TanStack Start offers a comprehensive framework for building modern web applications with advanced features and improved developer experience.

For Developers:

• Simplified Setup: TanStack Start provides a unified package that integrates routing, data fetching, and state management, streamlining the development process.
• Advanced Data Handling: The framework offers powerful primitives for caching, invalidating, and composing server-side state, including support for React Server Components.
• Efficient Streaming: TanStack Start has built-in support for streaming data and HTML to the client, enabling incremental content delivery without added complexity.
• Full-Stack Development: The framework supports both server-first and client-first architectures, allowing developers to build applications that leverage the best of both worlds.
• Improved Type Safety: TanStack Start provides contextual type safety throughout the application, from route definitions to navigation and state management, enhancing code reliability.
• Flexible Routing: The framework supports various routing strategies, including configuration-based, file-based, and component-based routing, catering to different project needs.

Performance and Scalability:

• Optimized for Speed: TanStack Start is designed for high performance, with efficient route matching and rendering capabilities.
• Seamless Data Integration: Deep integration between routing and data fetching (via TanStack Query) enables efficient prefetching, caching, and streaming of data.
• Future-Ready Architecture: The framework is built to handle upcoming web technologies, including React Server Components and advanced streaming capabilities.

TanStack Start combines the power of TanStack Router with additional full-stack features, making it a compelling choice for developers looking to build scalable, performant, and type-safe web applications.

TanStack Start Documentation

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time:

1. Single types: Create one-off pages that have a unique content structure.
2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration.
3. 100% TypeScript Support: Enjoy type safety & easy maintainability
4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
6. Editor interface: The editor allows you to pull in dynamic blocks of content.
7. Authentication: Secure and authorize access to your API with JWT or providers.
8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.
9. i18n: Manage content in multiple languages. Easily query the different locales through the API.
10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

• Access Live Demo!

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project


We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up.
  Login/Sign up
❯ Skip

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Nice, now that we have our Strapi 5 server setup, we can start to setup TanStack Start.

Getting Started with TanStack Start

I will walk you through the steps to setup a TanStack Start project. But here is the link to the TanStack Start Docs that I used for reference.

TanStack Start Installation and Initial Setup

Make sure that you are in the root directory of your project and run the following command to install an example TanStack Start project based on the docs.

This is a quick and easy way to get started with TanStack Start and learn about the basic functionality of the framework.

  npx degit https://github.com/tanstack/router/examples/react/start-basic client
  cd client
  npm install
  npm run dev

Once everything is installed, and your project is running we should see the following screen. I navigated to the Posts page, where you can see the basic view of all the posts fetched from https://jsonplaceholder.typicode.com/posts.

Nice, now that we have our TanStack Start client setup, we can start to integrate it with our Strapi 5 server.

You can find the data fetching logic in the app/utils/posts.ts file.

The code will look like the following:

1import { notFound } from '@tanstack/react-router'
2import { createServerFn } from '@tanstack/start'
3import axios from 'redaxios'
4
5export type PostType = {
6  id: string
7  title: string
8  body: string
9}
10
11export const fetchPost = createServerFn({ method: 'GET' })
12  .validator((d: string) => d)
13  .handler(async ({ data }) => {
14    console.info(`Fetching post with id ${data}...`)
15    const post = await axios
16      .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${data}`)
17      .then((r) => r.data)
18      .catch((err) => {
19        console.error(err)
20        if (err.status === 404) {
21          throw notFound()
22        }
23        throw err
24      })
25
26    return post
27  })
28
29export const fetchPosts = createServerFn({ method: 'GET' }).handler(
30  async () => {
31    console.info('Fetching posts...')
32    return axios
33      .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
34      .then((r) => r.data.slice(0, 10))
35  },
36)

Notice we are fetching the post from jsonplaceholder api. Let's update the code to fetch the posts from our Strapi 5 server.

The updated file should look like the following:

1import { notFound } from "@tanstack/react-router";
2import { createServerFn } from "@tanstack/start";
3import qs from "qs";
4import axios from "redaxios";
5
6import { getStrapiURL } from "./strapi";
7
8const BASE_API_URL = getStrapiURL();
9
10interface StrapiArrayResponse<T> {
11  data: T[];
12  meta: {
13    pagination: {
14      page: number;
15      pageSize: number;
16      pageCount: number;
17      total: number;
18    };
19  };
20}
21
22interface StrapiResponse<T> {
23  data: T;
24}
25
26interface CoverImage {
27  url: string;
28  alternativeText: string;
29}
30
31export type PostType = {
32  id: number;
33  documentId: string;
34  title: string;
35  description: string;
36  slug: string;
37  createdAt: string;
38  updatedAt: string;
39  publishedAt: string;
40  cover: CoverImage;
41  blocks: any[];
42};
43
44export const fetchPost = createServerFn({ method: "GET" })
45  .validator((d: string) => d)
46  .handler(async ({ data }) => {
47    console.info(`Fetching post with id ${data}...`);
48
49    const path = "/api/articles/" + data;
50    const url = new URL(path, BASE_API_URL);
51
52    url.search = qs.stringify({
53      populate: {
54        cover: {
55          fields: ["url", "alternativeText"],
56        },
57        blocks: {
58          populate: "*",
59        },
60      },
61    });
62
63    const post = await axios
64      .get<StrapiResponse<PostType>>(url.href)
65      .then((r) => {
66        // console.dir(r.data, { depth: null });
67        return r.data.data;
68      })
69      .catch((err) => {
70        console.error(err);
71        if (err.status === 404) {
72          throw notFound();
73        }
74        throw err;
75      });
76
77    return post;
78  });
79
80export const fetchPosts = createServerFn({ method: "GET" }).handler(
81  async () => {
82    console.info("Fetching posts...");
83
84    const path = "/api/articles";
85    const url = new URL(path, BASE_API_URL);
86
87    url.search = qs.stringify({
88      populate: {
89        cover: {
90          fields: ["url", "alternativeText"],
91        },
92      },
93    });
94
95    return axios.get<StrapiArrayResponse<PostType>>(url.href).then((r) => {
96      console.dir(r.data, { depth: null });
97      return r.data.data; // Extract the data array from the Strapi response
98    });
99  }
100);

Notice that we are importing the qs package to help with the query string, and we are using the getStrapiURL function to get the base URL of our Strapi 5 server.

Let's first add the qs package to our project and it's types with the following command:

  npm i qs
  npm i @types/qs

Now in the utils folder, create a new file called strapi.ts and update the file with the following code:

1export function getStrapiURL() {
2  return import.meta.env.VITE_STRAPI_BASE_URL ?? "http://localhost:1337";
3}
4
5export function getStrapiMedia(url: string | null) {
6  if (url == null) return null;
7  if (url.startsWith("data:")) return url;
8  if (url.startsWith("http") || url.startsWith("//")) return url;
9  return `${getStrapiURL()}${url}`;
10}

We will use the getStrapiURL function to get the base URL of our Strapi 5 server and the getStrapiMedia function to get the media URL path of our files stored in Strapi.

Now before we can see our data, we need to update the following routes to take into account that we are fetching data from our Strapi 5 server.

In the app/routes/posts.tsx route, update the file to the following:

1import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
2import { fetchPosts } from '../utils/posts'
3
4export const Route = createFileRoute('/posts')({
5  loader: async () => fetchPosts(),
6  component: PostsComponent,
7})
8
9function PostsComponent() {
10  const posts = Route.useLoaderData()
11
12  return (
13    <div className="max-w-7xl mx-auto p-6 flex gap-8">
14      <div className="w-1/3 bg-white rounded-lg shadow-md p-6">
15        <h2 className="text-xl font-semibold mb-4 text-gray-800">Posts</h2>
16        <ul className="space-y-2">
17          {posts.map(
18            (post) => {
19              return (
20                <li key={post.documentId}>
21                  <Link
22                    to="/posts/$postId"
23                    params={{
24                      postId: post.documentId,
25                    }}
26                    className="block px-4 py-2 rounded-md transition-colors hover:bg-blue-50 text-blue-600 hover:text-blue-800"
27                    activeProps={{ 
28                      className: 'bg-blue-100 text-blue-900 font-medium'
29                    }}
30                  >
31                    <div>{post.title.substring(0, 20)}</div>
32                  </Link>
33                </li>
34              )
35            },
36          )}
37        </ul>
38      </div>
39      <div className="w-2/3">
40        <Outlet />
41      </div>
42    </div>
43  )
44}

Now let's navigate to the posts.$postId.tsx route and update the file to the following:

1import { ErrorComponent, Link, createFileRoute } from "@tanstack/react-router";
2import { fetchPost } from "../utils/posts";
3import type { ErrorComponentProps } from "@tanstack/react-router";
4import { NotFound } from "~/components/NotFound";
5import { getStrapiMedia } from "~/utils/strapi";
6
7export const Route = createFileRoute("/posts/$postId")({
8  loader: ({ params: { postId } }) => fetchPost({ data: postId }),
9  errorComponent: PostErrorComponent,
10  component: PostComponent,
11  notFoundComponent: () => {
12    return <NotFound>Post not found</NotFound>;
13  },
14});
15
16export function PostErrorComponent({ error }: ErrorComponentProps) {
17  return <ErrorComponent error={error} />;
18}
19
20function PostComponent() {
21  const post = Route.useLoaderData();
22  const coverUrl = getStrapiMedia(post.cover.url);
23  const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
24    year: "numeric",
25    month: "long",
26    day: "numeric",
27  });
28
29  return (
30    <article className="max-w-2xl mx-auto p-6 space-y-6">
31      {/* Hero Image */}
32      <div className="relative aspect-video w-full overflow-hidden rounded-lg shadow-lg">
33        <img
34          src={coverUrl ?? undefined}
35          alt={post.cover.alternativeText}
36          className="object-cover w-full h-full"
37        />
38      </div>
39
40      {/* Content */}
41      <div className="space-y-4">
42        <h1 className="text-3xl font-bold text-gray-900">{post.title}</h1>
43
44        <div className="flex items-center text-sm text-gray-500">
45          <time dateTime={post.publishedAt}>{formattedDate}</time>
46        </div>
47
48        <p className="text-lg text-gray-700">{post.description}</p>
49
50        <Link
51          to="/posts/$postId/deep"
52          params={{
53            postId: post.documentId,
54          }}
55          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
56        >
57          Read Full Article
58        </Link>
59      </div>
60    </article>
61  );
62}

And finally, let's navigate to the app/routes/posts.$postId.deep.tsx file and update the file to the following:

1import { Link, createFileRoute } from "@tanstack/react-router";
2import { fetchPost } from "../utils/posts";
3import { PostErrorComponent } from "./posts.$postId";
4import { getStrapiMedia } from "~/utils/strapi";
5import { MarkdownText } from "~/components/MarkdownText";
6
7function BlockRenderer(blocks: any) {
8  return blocks.map((block: any, index: number) => {
9    return <MarkdownText key={index} content={block.body} />;
10  });
11}
12
13export const Route = createFileRoute("/posts_/$postId/deep")({
14  loader: async ({ params: { postId } }) =>
15    fetchPost({
16      data: postId,
17    }),
18  errorComponent: PostErrorComponent,
19  component: PostDeepComponent,
20});
21
22function PostDeepComponent() {
23  const post = Route.useLoaderData();
24  const coverUrl = getStrapiMedia(post.cover.url);
25
26  console.log(post);
27
28  return (
29    <div className="max-w-3xl mx-auto p-6 space-y-6">
30      <Link
31        to="/posts"
32        className="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors"
33      >
34        <span className="mr-2">←</span>Back to Posts
35      </Link>
36
37      {post.cover && (
38        <div className="aspect-video relative overflow-hidden rounded-lg shadow-lg">
39          <img
40            src={coverUrl ?? undefined}
41            alt={post.cover.alternativeText}
42            className="object-cover w-full h-full"
43          />
44        </div>
45      )}
46
47      <article className="space-y-4">
48        <h1 className="text-3xl font-bold text-gray-900">{post.title}</h1>
49        <div className="flex items-center text-sm text-gray-500 space-x-4">
50          <time dateTime={post.publishedAt}>
51            {new Date(post.publishedAt).toLocaleDateString("en-US", {
52              year: "numeric",
53              month: "long",
54              day: "numeric",
55            })}
56          </time>
57          {post.updatedAt !== post.publishedAt && (
58            <span>
59              (Updated: {new Date(post.updatedAt).toLocaleDateString()})
60            </span>
61          )}
62        </div>
63        <p className="text-gray-700 leading-relaxed">{post.description}</p>
64        {BlockRenderer(post.blocks)}
65      </article>
66    </div>
67  );
68}

Notice that we are using our MarkdownText component to render the markdown content of our post.

Let's create it in the components folder by adding a file called MarkdownText.tsx and update the file to the following:

1import Markdown from "react-markdown";
2import remarkGfm from "remark-gfm";
3
4export  function MarkdownText({ content }: { content: string }) {
5  return (
6    <section className="rich-text py-6 dark:bg-black dark:text-gray-50 ">
7      <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
8    </section>
9  );
10}

Now let's run the following to install the react-markdown and remark-gfm packages:

  npm i react-markdown remark-gfm

Now restart your TanStack Start app and navigate to Posts select an article, you should see the following:

And if you click on Read Full Article, you should see the following:

Awesome, great job!

Github Project Repo

You can find the complete code for this project in the following Github repo.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and TanStack Start documentation.