英文:

next-auth signOut button click is not accepting a variable but the string itself works

问题

I understand that you want a translation of the code parts you provided. Here are the translated code parts:

组件**Nav.jsx**的代码如下。这按预期工作。

当您单击“登出”按钮时，应用程序将重定向到http://localhost:3000。

```jsx
'使用客户端'

import { signOut } from 'next-auth/react'
import Link from 'next/link'

const Nav = () => {
  return (
    <nav>
      <button
        type="button"
        onClick={() => signOut({ callbackUrl: 'http://localhost:3000' })}
        className="outline_btn"
      >
        登出
      </button>
      <Link href="/profile" className="outline_btn">
        个人资料
      </Link>
    </nav>
  )
}

export default Nav

我将URL http://localhost:3000 移到了我的 .env.local 文件 (.env.local):

AUTH0_SIGNOUT_CALLBACK_URL=http://localhost:3000

我已更改Nav.jsx文件如下：

'使用客户端'

import { signOut } from 'next-auth/react'
import Link from 'next/link'

const signOutUrl = process.env.AUTH0_SIGNOUT_CALLBACK_URL

const Nav = () => {
  return (
    <nav>
      <button
        type="button"
        onClick={() => signOut({ callbackUrl: signOutUrl })}
        className="outline_btn"
      >
        登出
      </button>
      <Link href="/profile" className="outline_btn">
        个人资料
      </Link>
    </nav>
  )
}

export default Nav

现在，当我运行应用程序时，登出回调URL不起作用。

非常感谢您的帮助。

<details>
<summary>英文:</summary>

**Nav.jsx** component code is below. This is working as intended. 

When you click &#39;Sign Out&#39; button, application redirects to http://localhost:3000.

'use client'

import { signOut } from 'next-auth/react'
import Link from 'next/link'

const Nav = () => {
return (
<nav>
<button
type="button"
onClick={() => signOut({ callbackUrl: 'http://localhost:3000' })}
className="outline_btn"
>
Sign Out
</button>
<Link href="/profile" className="outline_btn">
Profile
</Link>
</nav>
)
}

export default Nav

I moved the url http://localhost:3000 to my .env.local file (**.env.local**):

AUTH0_SIGNOUT_CALLBACK_URL=http://localhost:3000

I have changed the **Nav.jsx** file to below:

'use client'

import { signOut } from 'next-auth/react'
import Link from 'next/link'

const signOutUrl = process.env.AUTH0_SIGNOUT_CALLBACK_URL

const Nav = () => {
return (
<nav>
<button
type="button"
onClick={() => signOut({ callbackUrl: signOutUrl })}
className="outline_btn"
>
Sign Out
</button>
<Link href="/profile" className="outline_btn">
Profile
</Link>
</nav>
)
}

export default Nav

Now when I run the application, the Sign Out call back URL does not work. 

Any help is much appreciated. 

</details>


# 答案1
**得分**: 1

我认为你需要在 Next.js 13 中在客户端组件中使用环境变量时，要在变量前面加上 `NEXT_PUBLIC_` 前缀。我还没有在任何客户端组件中使用过环境变量，所以请在 `.env.local` 文件中进行以下更改：

NEXT_PUBLIC_AUTH0_SIGNOUT_CALLBACK_URL=http://localhost:3000

然后在客户端组件中可以这样使用：

const signOutUrl = process.env.NEXT_PUBLIC_AUTH0_SIGNOUT_CALLBACK_URL

<details>
<summary>英文:</summary>

I think you have to prefix env variables with `NEXT_PUBLIC_` to make them available in client components in nextjs 13. I have not used env variable in any client component, so make this change in .env.local file

    NEXT_PUBLIC_AUTH0_SIGNOUT_CALLBACK_URL=http://localhost:3000

then in client component

    const signOutUrl = process.env.NEXT_PUBLIC_AUTH0_SIGNOUT_CALLBACK_URL

</details>