在next.js服务器端页面组件中(在app目录中),如何获取当前url?

bwleehnv  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(246)

我使用的是next.js版本13。实验应用目录,该目录无权访问getServerSideProps()
默认情况下,“app”目录中的页面是服务器端的。
在page.js中,我试图获取当前页面的url。
我该怎么做?

export default async function myPage(props) {
    const prot =  // HTTP or HTTPS
    const domain = //www.myserver.com
    const port = //3000
    ... and so on.
    
    
}

字符串
我看到了这个解决方案:Get URL pathname in nextjs
但是“next\router”在服务器组件上不起作用。
我在编译时得到这个错误:您有一个导入next/router的服务器组件。使用next/navigation代替。

xfb7svmp

xfb7svmp1#

我不知道你的用例是什么,但我需要获得当前的url,这样我就可以用redirectTo参数将未经身份验证的用户重定向到登录页面。
根据Next.js文档:
布局无法访问当前管段
这可以用middleware来实现:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {

  if (req.nextUrl.pathname.startsWith('/protected/path') && userIsUnauthenticated()) {
    const currentUrl = req.nextUrl;
    const redirectTo =
      currentUrl.pathname + currentUrl.search + currentUrl.hash;

    const redirect = new URL('/login', req.url);
    redirect.searchParams.set('redirectTo', redirectTo);
    return NextResponse.redirect(redirect);
  }

  return NextResponse.next();
}

字符串
这里的关键字是NextRequest.nextUrl
使用额外的便利方法扩展原生URL API,包括Next.js特定属性。
示例如下:

const protocol = req.nextUrl.protocol // HTTP or HTTPS
const domain = req.nextUrl.hostname // www.myserver.com
const port = req.nextUrl.port // 3000

相关问题