Next.js 13实验性App目录中如何设置键盘快捷键？

由于根布局默认是Server Component，无法直接使用客户端钩子，你可以通过创建独立的客户端组件处理键盘事件，再在根布局中引入该组件的方式实现全局快捷键设置，具体步骤如下：

1. 创建客户端快捷键组件 #

新建一个客户端组件（比如components/KeyboardShortcuts.tsx），添加'use client'指令声明为客户端组件，然后在其中编写键盘事件监听逻辑：

'use client';

import { useCallback, useEffect } from 'react';

export default function KeyboardShortcuts() {
  const handleKeyDown = useCallback((event: KeyboardEvent) => {
    // 示例：监听 Ctrl+K 快捷键
    if (event.ctrlKey && event.key === 'k') {
      event.preventDefault();
      console.log('Ctrl+K 快捷键触发');
      // 在这里执行你的业务逻辑，比如打开搜索面板
    }

    // 可扩展更多快捷键规则
    if (event.key === 'Escape') {
      console.log('ESC 键触发');
      // 执行关闭弹窗等操作
    }
  }, []);

  useEffect(() => {
    // 绑定全局键盘事件
    document.addEventListener('keydown', handleKeyDown);
    // 组件卸载时移除监听器，避免内存泄漏
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [handleKeyDown]);

  // 该组件无需渲染可视内容，返回 null 即可
  return null;
}

2. 在根布局中引入该组件 #

在根layout.tsx中导入并渲染这个客户端组件，由于Server Component可以嵌套Client Component，这样就能实现全局范围内的键盘事件监听：

import KeyboardShortcuts from './components/KeyboardShortcuts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 全局快捷键组件，放在children之前或之后都不影响 */}
        <KeyboardShortcuts />
        {children}
      </body>
    </html>
  );
}

注意事项 #

• 必须添加'use client'指令，否则组件会被当作Server Component，使用useEffect时会报错。
• 可以根据需求在handleKeyDown中扩展更多快捷键逻辑，注意处理event.preventDefault()避免浏览器默认行为干扰。
• 务必在useEffect的清理函数中移除事件监听器，防止内存泄漏。

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