+ )
+}
diff --git a/examples/publish-ci/next/src/features/counter/counterAPI.ts b/examples/publish-ci/next/src/features/counter/counterAPI.ts
new file mode 100644
index 0000000000..01e8caaf51
--- /dev/null
+++ b/examples/publish-ci/next/src/features/counter/counterAPI.ts
@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+ return new Promise<{ data: number }>((resolve) =>
+ setTimeout(() => resolve({ data: amount }), 500)
+ )
+}
diff --git a/examples/publish-ci/next/src/features/counter/counterSlice.ts b/examples/publish-ci/next/src/features/counter/counterSlice.ts
new file mode 100644
index 0000000000..aea017c0dd
--- /dev/null
+++ b/examples/publish-ci/next/src/features/counter/counterSlice.ts
@@ -0,0 +1,84 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { RootState, AppThunk } from '../../app-core/store'
+import { fetchCount } from './counterAPI'
+
+export interface CounterState {
+ value: number
+ status: 'idle' | 'loading' | 'failed'
+}
+
+const initialState: CounterState = {
+ value: 0,
+ status: 'idle',
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+export const incrementAsync = createAsyncThunk(
+ 'counter/fetchCount',
+ async (amount: number) => {
+ const response = await fetchCount(amount)
+ // The value we return becomes the `fulfilled` action payload
+ return response.data
+ }
+)
+
+export const counterSlice = createSlice({
+ name: 'counter',
+ initialState,
+ // The `reducers` field lets us define reducers and generate associated actions
+ reducers: {
+ increment: (state) => {
+ // Redux Toolkit allows us to write "mutating" logic in reducers. It
+ // doesn't actually mutate the state because it uses the Immer library,
+ // which detects changes to a "draft state" and produces a brand new
+ // immutable state based off those changes
+ state.value += 1
+ },
+ decrement: (state) => {
+ state.value -= 1
+ },
+ // Use the PayloadAction type to declare the contents of `action.payload`
+ incrementByAmount: (state, action: PayloadAction) => {
+ state.value += action.payload
+ },
+ },
+ // The `extraReducers` field lets the slice handle actions defined elsewhere,
+ // including actions generated by createAsyncThunk or in other slices.
+ extraReducers: (builder) => {
+ builder
+ .addCase(incrementAsync.pending, (state) => {
+ state.status = 'loading'
+ })
+ .addCase(incrementAsync.fulfilled, (state, action) => {
+ state.status = 'idle'
+ state.value += action.payload
+ })
+ .addCase(incrementAsync.rejected, (state) => {
+ state.status = 'failed'
+ })
+ },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+ (amount: number): AppThunk =>
+ (dispatch, getState) => {
+ const currentValue = selectCount(getState())
+ if (currentValue % 2 === 1) {
+ dispatch(incrementByAmount(amount))
+ }
+ }
+
+export default counterSlice.reducer
diff --git a/examples/publish-ci/next/src/features/posts/Post.tsx b/examples/publish-ci/next/src/features/posts/Post.tsx
new file mode 100644
index 0000000000..aabe905144
--- /dev/null
+++ b/examples/publish-ci/next/src/features/posts/Post.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+// import the file that injects "post" to make sure it has been loaded
+import { useGetPostQuery } from '../../app-core/services/post'
+
+export const Post = ({ id }: { id: number }) => {
+ const { data, error } = useGetPostQuery(id)
+ const content = error ? (
+ <>there was an error
+ ) : !data ? (
+ <>loading
+ ) : (
+