如何在Next.js中配置Facebook登录SDK？该方案是否为最佳实践？

首先，你提到的这个实现方式是正确的：

• Next.js的<Head>组件就是用来管理页面头部元素的，不管是页面级还是全局的元信息、脚本、样式都可以通过它添加。
• 放在/public目录下的文件可以直接通过根路径访问，所以src="/static/script.js"的路径写法没问题，Next.js会正确解析这个静态资源。

不过它不算最优实践，原因和更优方案如下：

• 如果你的脚本是Facebook官方的SDK，更推荐直接引入CDN链接而非本地文件：官方CDN有缓存优势，且能自动同步最新版本，避免本地文件过时。
• Next.js 11+提供了专门的<Script>组件（next/script），相比<Head>里的<script>标签，它支持多种加载策略（比如lazyOnload懒加载、beforeInteractive预加载等），能更精准地控制脚本加载时机，优化页面性能。比如针对Facebook登录，你可以这样写：

import Script from 'next/script';

export default function LoginPage() {
  return (
    <div>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() => {
          // 初始化Facebook SDK
          window.fbAsyncInit = function() {
            FB.init({
              appId      : '你的应用ID',
              cookie     : true,
              xfbml      : true,
              version    : 'v18.0'
            });
          };
        }}
      />
      {/* 你的登录按钮组件 */}
    </div>
  );
}

• 另外，如果多个页面都需要用到Facebook登录功能，建议把脚本放在_app.js的<Head>或<Script>里全局引入，避免重复代码；如果只在登录页使用，就在登录页单独引入即可。

内容的提问来源于stack exchange，提问作者Suphawat