diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx
new file mode 100644
index 000000000..9e057d559
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx
@@ -0,0 +1,222 @@
+import UriInputField from '@mdx/components/UriInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+import Alert from '@/components/Alert';
+import { generateRandomString } from '@logto/shared';
+
+ props.onNext(1)}
+>
+
+
+
+```bash
+npm i @logto/next
+```
+
+
+
+
+```bash
+yarn add @logto/next
+```
+
+
+
+
+```bash
+pnpm add @logto/next
+```
+
+
+
+
+
+ props.onNext(2)}
+>
+
+
+ In the following steps, we assume your app is running on http://localhost:3000.
+
+
+Import and initialize LogtoClient:
+
+
+
+{`// libraries/logto.js
+import { LogtoProvider, LogtoConfig } from '@logto/next';
+
+export const logtoClient = new LogtoClient({
+ endpoint: '${props.endpoint}',
+ appId: '${props.appId}',
+ baseUrl: 'http://localhost:3000', // Change to your own base URL
+ cookieSecret: '${generateRandomString(32)}', // Auto-generated 32 digit secret
+ cookieSecure: process.env.NODE_ENV === 'production',
+});`}
+
+
+
+
+
+ props.onNext(3)}
+>
+
+### Configure Redirect URI
+
+First, let’s enter your redirect URI. E.g. `http://localhost:3000/api/logto/sign-in-callback`.
+
+
+
+### Prepare API routes
+
+Prepare [API routes](https://nextjs.org/docs/api-routes/introduction) to connect with Logto.
+
+Go back to your IDE/editor, use the following code to implement the API routes first:
+
+
+
+This will create 4 routes automatically:
+
+1. `/api/logto/sign-in`: Sign in with Logto.
+2. `/api/logto/sign-in-callback`: Handle sign-in callback.
+3. `/api/logto/sign-out`: Sign out with Logto.
+4. `/api/logto/user`: Check if user is authenticated with Logto, if yes, return user info.
+
+### Implement sign-in button
+
+We're almost there! In the last step, we will create a sign-in button:
+
+```tsx
+import { useRouter } from 'next/router';
+
+const { push } = useRouter();
+
+
+```
+
+Now you will be navigated to Logto sign-in page when you click the button.
+
+
+
+ props.onNext(4)}
+>
+
+### Through API request in the frontend
+
+You can fetch user info by calling `/api/logto/user`.
+
+```tsx
+import { LogtoUser } from '@logto/next';
+import useSWR from 'swr';
+
+const Home = () => {
+ const { data } = useSWR('/api/logto/user');
+
+ return
User ID: {data?.claims?.sub}
;
+};
+
+export default Profile;
+```
+
+Check [this guide](https://swr.vercel.app/docs/getting-started) to learn more about `useSWR`.
+
+### Through `getServerSideProps` in the backend
+
+```tsx
+import { LogtoUser } from '@logto/next';
+import { logtoClient } from '../libraries/logto';
+
+type Props = {
+ user: LogtoUser;
+};
+
+const Profile = ({ user }: Props) => {
+ return
User ID: {user.claims?.sub}
;
+};
+
+export default Profile;
+
+export const getServerSideProps = logtoClient.withLogtoSsr(({ request }) => {
+ const { user } = request;
+
+ return {
+ props: { user },
+ };
+});
+```
+
+Check [Next.js documentation](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) for more details on `getServerSideProps`.
+
+
+
+ props.onNext(5)}
+>
+
+Calling `.signOut()` will clear all the Logto data in memory and cookies if they exist.
+
+After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below before calling `api/logto/sign-out`.
+
+
+
+### Implement a sign-out button
+
+