> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scute.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
# Using the Next.js SDK with the pre-built React UI
If you would like to use the pre-built `Scute UI` with your Next.js app, you can do so using the `@scute/ui-react` package alongside `@scute/nextjs` and `@scute/react`. This package would expose the pre-built `Auth` and `Profile` components which you can use to easily integrate Scute to your current app.
Head over to the [example project repo](https://github.com/scuteai/nextjs-scute-ui) to clone and run this example project and check out the [type docs](https://scute-js-docs.netlify.app/) for more `scuteClient` methods.
### Install the SDK
Install our React SDKs with your favorite package manager:
`npm install @scute/nextjs @scute/react @scute/ui-react`
Add your [credentials](/docs) to your environment variable handler:
```sh theme={null}
NEXT_PUBLIC_SCUTE_APP_ID="YOUR_SCUTE_PROJECT_ID"
NEXT_PUBLIC_SCUTE_BASE_URL="YOUR_SCUTE_BASE_URL"
SCUTE_SECRET="YOUR_SCUTE_SECRET"
```
### Add the Scute Next.js Handlers (App Router)
In your project under `src/app`, create the path `auth/[...scute]`. Inside the newly created folder `[...scute]`, create a file named `route.js`. This file will be the handler for the requests coming in from the pre-built React UI.
The directory structure should look like this:
```
src/
└─ app/
└─ auth/
└─ [...scute]/
└─ route.js
```
To implement the handlers, add the code block below to the `route.js` file.
```js theme={null}
import { cookies, headers } from "next/headers";
import { ScuteHandler } from "@scute/nextjs";
const handler = ScuteHandler({ cookies, headers });
export { handler as GET, handler as POST };
```
### Add the UI and the AuthContextProvider
Using the `@scute/ui-react` and `@scute/react` packages, create an `AuthProvider` and the `Auth` component. Please refer to the [Scute React UI docs](./react.mdx) for more information.
```js theme={null}
// src/components/authprovider.js
"use client";
import { useState } from "react";
import { createClientComponentClient } from "@scute/nextjs";
import { AuthContextProvider } from "@scute/react";
export default function AuthProvider({ children }) {
const [scuteClient] = useState(() =>
createClientComponentClient({
appId: process.env.NEXT_PUBLIC_SCUTE_APP_ID,
baseUrl: process.env.NEXT_PUBLIC_SCUTE_BASE_URL,
})
);
return (
{children}
);
}
```
```js theme={null}
// src/components/auth.js
"use client";
import { useRouter } from "next/navigation";
import { useScuteClient } from "@scute/react";
import { Auth as ScuteAuth } from "@scute/ui-react";
export default function Auth() {
const router = useRouter();
const scuteClient = useScuteClient();
return (
{
router.push("/profile");
}}
logoUrl="https://example.com/logo.svg"
/>
);
}
```
### Add the `AuthProvider` to the `RootLayout`
Wrap the HTML body with the Auth provider inside your root layout file
```js theme={null}
// src/app/layout.js
import AuthProvider from "@/components/authprovider";
import "./globals.css";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
{children}
);
}
```
Once the `AuthProvider` is in place, go ahead and add the Auth component to your homepage:
```js theme={null}
// src/app/page.js
import Auth from "@/components/auth";
export default function Home() {
return (
);
}
```
### Create a profile page with the `Profile` component
Finally, build the profile page to handle the redirect from the home page on successful authentication,
```js theme={null}
// src/app/profile/page.js
"use client";
import { useScuteClient } from "@scute/react";
import { Profile as ScuteProfile } from "@scute/ui-react";
export default function Profile() {
const scuteClient = useScuteClient();
return ;
}
```
Congratulations! You now have a working Scute instance inside your Next.js app!
### Add the Scute Next.js Handlers (Pages Router)
To add the Scute handlers for Pages Router, create the path `src/pages/auth` and create a file named `[...scute].js` with the below content.
```js theme={null}
// src/pages/auth/[...scute].js
import { ScuteHandler } from "@scute/nextjs";
export default ScuteHandler;
```
To use Edge runtime, use the following code:
```js theme={null}
import { authenticateRequest } from "@scute/edge";
import { createPagesEdgeRuntimeClient } from "@scute/nextjs";
import { type NextRequest, NextResponse } from "next/server";
export const config = {
runtime: "edge",
};
export default async function handler(request: NextRequest) {
const scute = createPagesEdgeRuntimeClient({ request });
const { data: user, error } = await authenticateRequest(request, scute);
return NextResponse.json(user);
}
```