Installation & Setup
Getting started with Stack in 5 minutes
Setup
To get started with Stack, you need a Next.js project with the app router. The pages router is not supported.
We recommend using our setup wizard, which will automatically detect your project structure and guide you through the installation process. In case it fails, you can choose to do the manual installation instead.
Setup wizard (recommended)
Manual installation
Update API keys
Then, you must create an account on our dashboard, create a new project with an API key, and copy its environment variables into the .env.local
file of your Next.js project:
Done!
That’s it! The following files should have been created or updated in your project:
app/handler/[...stack]/page.tsx
: This file contains the default pages for sign-in, sign-out, account settings, and more. If you prefer, later you will learn how to use custom pages instead.app/layout.tsx
: The layout file was updated to wrap the entire body withStackProvider
andStackTheme
.app/loading.tsx
: If not yet found, Stack automatically adds a Suspense boundary to your app. This is shown to the user while Stack’s async hooks, likeuseUser
, are loading.stack.ts
: This file contains thestackServerApp
which you can use to access Stack from Server Components, Server Actions, API routes, and middleware.
Post-setup
That’s it! Stack is now configured in your Next.js project. If you start your Next.js app with npm run dev
and navigate to http://localhost:3000/handler/signup, you will see the Stack sign-up page.
![Stack sign in page](https://fdr-prod-docs-files-public.s3.amazonaws.com/https://stack-auth.docs.buildwithfern.com/2024-09-07T21:15:04.771Z/docs/pages/imgs/sign-in.png)
After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the http://localhost:3000/handler/account-settings page which looks like this:
![Stack account settings page](https://fdr-prod-docs-files-public.s3.amazonaws.com/https://stack-auth.docs.buildwithfern.com/2024-09-07T21:15:04.771Z/docs/pages/imgs/account-settings-page.png)
Next steps
Next up, we will show you how to retrieve and update user information, and how to protect a page.