NextJs - 不同动作的相同路线名称答案

【问题标题】：NextJs - Same route name for different actionNextJs - 不同动作的相同路线名称
【发布时间】：2021-12-21 00:28:57
【问题描述】：

我想知道，我们可以为不同的操作使用相同的路由名称吗？例如用于获取、编辑和删除数据的产品/ID。

在 NextJs 中可能吗？我想实现与 Laravel 相同的路由系统，它可以根据表单方法为不同的操作使用一个名称

【问题讨论】：

行动中是什么意思？某行 /blog/post /blog/post2?还是在同一页面上显示不同的页面内容？
我的意思通常是当我们想要创建一个路由时，我们会给出路由路径，例如product/edit/:id 用于编辑页面，product/delete/:id 用于删除页面。我想知道的是可以用路径制作路径路径吗？每个路由路径在哪里执行不同的任务？例如product/:id 用于编辑页面，product/:id 用于删除页面。我已经看到 Laravel 可以做到这一点，但不确定在 NextJs 中，因为我还在学习。
这里是 Laravel digitalocean.com/community/tutorials/… 中的路由示例，显示、更新和销毁操作采用相同的路由路径

标签： routes next.js action

【解决方案1】：

是的，你可以，你可以使用 Next.js 进行嵌套路由

第 1 部分： 文件夹结构（详情here）：

页面/product/delete/[id].js（或.tsx）

行为：当您访问 [your_domain]/product/delete/433 时，您的客户将被重定向到删除的 page，您将在此页面上捕获您的 433 值。如果你需要采取行动，你可以创建API routes 并调用 delete 方法。（例如，点击按钮）

因此，您的任务分为两个步骤：

创建 API 路由
创建页面
从路由到页面获取数据。（使用lib 进行客户端渲染，或getServerProps/getStaticProps）

此外，您可以创建一些 "middleware" 以将 DB 正确连接到您的项目。

附： laravel 中没有“Controllers”之类的控制器，你创建页面和页面联系DB 通过API calls。

示例：

/pages/weather/[城市].tsx

import useSWR from 'swr'

const Post = ({cityName, data}) => {
  
  //replace with your API
  //if you like to get data on client-side
  //you can set inverval of refresh, real-time data
  const {data: cityData, error: errorData} = useSWR(`https://api.weatherapi.com/v1/current.json?key=&q=${cityName}&aqi=no`, { refreshInterval: 500 })
  if (!cityData)
  return <div>Loading</div>
  if (cityData){
  return (
        <div>
            <p>Details for city: {cityName}</p>
            <p>Data via client side fetch </p>
            <pre>
                <code>
                {JSON.stringify(cityData, null, 2)}
                </code>
            </pre>
            <p>Data via server-side</p>
            <pre>
                <code>
                {JSON.stringify(data, null, 2)}
                </code>
            </pre>
        </div>
    )
  }
}
export async function getServerSideProps(context) {
    //if you like to fetch data on server side
    //laoded only ONCE page is requested (static)
    const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=&q=${context.params.city}&aqi=no`);
    const data = await res.json();
    return {
        props: {
            cityName: context.params.city,
            data: data
        }
    }
}
export default Post

所以，如果您登录 weatherAPI 并在 API 请求路由中添加您的密钥 (?key=)，它将呈现您的页面，显示您定义的城市/的天气/（示例：/weather/london；/weather/柏林）

【讨论】：