# Next.js Pages Router Reference

This library should be used if you are using Next.js as BOTH a frontend and a backend. Meaning, you are using Server Side Rendering (SSR).

This means you are using `getServerSideProps` or `getInitialProps` in your pages.

If you are using using Next.js as a frontend, you should prefer the [React](https://docs.propelauth.com/reference/frontend-apis/react) library.

## [Automatic Installation](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/automatic-installation#automatic-installation)

If you would prefer a manual installation process instead of an automatic one, check out the [installation guide here](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/installation-and-setup).

Begin by installing the PropelAuth CLI:

```bash
npm i -g @propelauth/cli
```

```bash
yarn global add @propelauth/cli
```

## [Logging into the PropelAuth CLI](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/automatic-installation#logging-into-the-propel-auth-cli)

Before we install PropelAuth in your Next.js project we first have to log into the CLI. If you haven't already created an account in PropelAuth, navigate to [auth.propelauth.com](https://auth.propelauth.com/en/signup) to get started.

Once you have an account with PropelAuth, run this command to login to the CLI:

```bash
propelauth login
```

To login you'll be prompted to create and copy/paste a Personal API Key into your terminal.

```
┌  ⚡ PropelAuth Login
│
●
│  Please visit the following URL to create a personal API key:
│
●  https://auth.propelauth.com/api_keys/personal  
│
│  Enter your API key
│  # enter your API key here
└
```

You can create a Personal API Key by navigating to [https://auth.propelauth.com/api_keys/personal](https://auth.propelauth.com/api_keys/personal) and clicking **\+ New API Key**.

### Selecting a Default Project

Once your API Key is validated the CLI will prompt you to select a default project, if desired. If you select a default project, the CLI will not prompt you to select a project again until you repeat the login process or run the `set-default-project` command.

```
┌
◇  ✓ Projects fetched successfully
│
◆  Select a project to use
│  ● Always ask which project to use (You will be prompted for each command)
│  ○ Acme Inc / New Project
└
```

## [Installing and Setting up PropelAuth in Next.js](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/automatic-installation#installing-and-setting-up-propel-auth-in-next-js)

Once you have logged into the CLI it's time to install PropelAuth within your Next.js app! Navigate to your Next.js project directory and run the following command:

```bash
propelauth setup
```

During installation you'll see the following prompts:

```
┌  ⚡ PropelAuth Setup
│
◆  Select your project framework:
│  ○ Next.js (App Router)
│  ● Next.js (Pages Router) (Uses pages/ directory structure)
│
◆  Select a project to use for this command
│  ● Acme Inc / New Project
│
◆  Enter the URL your Next.js app runs on:
│  ↳ http://localhost:3000
│
●  No API key found in environment file
│
◆  Would you like to generate a new Backend Integration API Key for this project?
│  ● yes / ○ no
│
│  Enter a name for the new Backend Integration API Key:
│  ↳ Next.js Integration
│
●  Updates needed for the Frontend Integration settings for your test environment
│  - Login redirect path: / → /api/auth/callback
│  - Logout redirect path: / → /api/auth/logout
│  - Development URL: none → http://localhost:3000
│
◆  Your test environment config needs to be updated, would you like to apply these changes now?
│  ● yes / ○ no
│
◆  Install @propelauth/nextjs now?
│  ● npm install @propelauth/nextjs (detected)
│  ○ yarn add @propelauth/nextjs
│  ○ pnpm install @propelauth/nextjs
│  ○ bun install @propelauth/nextjs
│  ○ Skip installation
│
●  _app.tsx with AuthProvider at /src/pages/_app.tsx differs from what we expected.
│
◆  Overwrite _app.tsx with AuthProvider?
│  ● Yes / ○ No
│
└  PropelAuth has been successfully set up in your Next.js project!
```

Once the CLI has successfully installed PropelAuth within your Next.js project it will also include some example components to help you get started.

### Server-Side Page

```jsx
import { getUserFromServerSideProps } from "@propelauth/nextjs/server/pages";

const WelcomeMessage = ({ user }) => {
    return <div>Welcome to your authenticated page, {user.email}!</div>
}

export async function getServerSideProps(context) {
    const user = await getUserFromServerSideProps(context)
    if (!user) {
        return { redirect: { destination: '/api/auth/login' } }
    }

return {
        props: {
            user: {
                email: user.email,
                // other user properties you need
            },
        },
    }
}

export default WelcomeMessage;
```

And you're all setup! Wondering what to do next? We have plenty of documentation around [Server Components Functions](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/server-component-functions), [Client Components Hooks](https://docs.propelauth.com/reference/fullstack-apis/nextjspages/client-component-hooks), as well as [Role Based Access Control](https://docs.propelauth.com/overview/authorization/rbac).