Next.js 14 App Router：同路径page.js与route.js共存及调用问题

1. 同路径下能否同时存在page.js和route.js？ #

可以。Next.js 14的App Router会明确区分两者的作用：

• page.js作为页面组件，负责该路径的UI渲染，访问路径时优先触发页面渲染
• route.js作为API路由，专门处理该路径下的HTTP请求（如GET/POST等）
  两者共存不会产生冲突，各自承担不同职责。

2. 页面组件中如何调用同路径的API？ #

直接通过当前路径的相对URL调用即可。比如在app/posts/page.js中，同目录route.js对应的API地址就是/posts，可以通过fetch方法发起请求：

• 在客户端组件中，可直接使用fetch，或结合useEffect处理初始数据加载
• 也可以封装成自定义hook（比如你提到的useLoaderData）来复用逻辑

3. 自定义useLoaderData的实现示例 #

如果你想通过自定义hook实现类似useLoaderData的功能，借助useEffect加载初始数据，可以参考以下代码：

第一步：编写自定义hook #

// app/posts/useLoaderData.js
'use client';

import { useState, useEffect } from 'react';

export function useLoaderData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        // 调用当前路径的API
        const response = await fetch(window.location.pathname);
        if (!response.ok) throw new Error('数据请求失败');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchInitialData();
  }, []);

  return { data, loading, error };
}

第二步：在page.js中使用hook #

// app/posts/page.js
'use client';

import { useLoaderData } from './useLoaderData';

export default function PostsPage() {
  const { data, loading, error } = useLoaderData();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载出错：{error}</div>;

  return (
    <div className="container">
      <h1>文章列表</h1>
      <ul>
        {data?.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

第三步：编写对应的route.js #

确保同路径下的route.js处理对应的HTTP请求，比如GET请求：

// app/posts/route.js
export async function GET() {
  // 模拟返回数据，实际可替换为数据库查询等逻辑
  const mockPosts = [
    { id: 1, title: 'Next.js App Router 入门' },
    { id: 2, title: '自定义Hook实践' },
  ];
  return Response.json(mockPosts);
}

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