Next.js 求助

[Juppiter]

RT. 有没有什么办法可以让浏览器在请求页面的时候 SSR 服务端拿到浏览器的数据(比如说浏览器的默认语言)。除了使用 cookie 和 queryString 的方式。

[USDT]

看你用的是 pages router 还是 app router ，本质上从请求的 headers 里面判断

// 比方说拿 user agent
pages router:

export async function getServerSideProps({ req }: { req: NextRequest }) {
const headers = req.headers;
console.log('!!!', headers);
return { props: { ua: headers.get('user-agent') } };
}


app router:
// 注意不能在'use client'的文件里面用
import { headers } from 'next/headers';

export default function Home() {
const hs = headers();
console.log('>>>>>>>>>>>', hs.get('user-agent'))
return (
<main>
Your agent is: {hs.get('user-agent')}
</main>
)
}

[mdn]

js: navigator.languages
服务器: request headers - Accept-Language

[Juppiter]

@USDT #1 可能我的描述不清楚。 目前的问题不是拿的问题，可能有自定义数据需要从浏览器取到服务端，这样的话用户从浏览器发送请求到服务端，在我的认知是没办法去加一个 custom header 让服务端拿到的吧

[Juppiter]

@mdn #2 如果不单是语言还有自定义数据怎么在服务端拿到呢

[mdn]

@Juppiter #4 如果是浏览器特定字段，可以从请求头中获取，比如语言等
如果需要自定义，那就只能 cookie 和 url query string

[USDT]

@Juppiter 弱问一句浏览器是否是你们自己可控的呢，比方说微信在点开链接的时候是自己的 web view 套了一层，那么这个时候他就可以有办法加自定义字段……如果就是普通的 Chrome 之类的应该是没办法的

[fenglirookie]

@USDT 他应该就是这个意思，就是在自己研发的 app webview 里面打开 nextjs 项目，在 nextjs 项目中拿到 webview 注入的自定义字段，再把这个字段传到 数据接口后台，这套我也没跑通(主要是没办法做得很通用)

[USDT]

@fenglirookie 嗯。。那我好奇问下做不到很通用的原因是啥呢，我理解最不济就是加几个自定义 header 的事情。是因为自定义数据比较复杂，嵌套层数可能比较多，想用类似 json 格式来做吗

[fenglirookie]

@USDT 我之前的做法是在_app.tsx 里面 使用某个钩子函数，在这个钩子函数中获取 cookie 里面的内容，复制到 axios 的原型上，但是后来发现服务端客户端不互通，我已经搞了几个月了都没成功 ，我建议你还是换一种方案。就是使用官网推荐的方式在 page/api 下面定义一次接口，在这里面就可以随便获取，而且客户端无感，倒是安全系数蛮高