next.js 动态路由——迹忆客-ag捕鱼王app官网

对于复杂的应用程序，使用预定义路径定义路由并不总是足够的。 在 next.js 中，我们可以动态创建路由。通过将括号添加到页面 ([param]) 来创建动态路由（也称为 url slugs、pretty urls 等）。

• 步骤 1. 定义 [id].js 文件 - [id].js 代表动态页面，其中 id 将是相对路径。 在 pages/post 目录中定义这个文件。
• 步骤 2. 定义 lib/posts.js - posts.js 代表 id 和内容。 lib 目录将在根目录中创建。

[id].js

使用设置路径的 getstaticpaths() 方法和 getstaticprops() 方法更新 [id].js 文件从而可以根据 id 获取内容。

[id].js

import link from 'next/link'
import head from 'next/head'
import container from '../../components/container'
import { getallpostids, getpostdata } from '../../lib/posts'
export default function post({ postdata }) {
   return (
      
         {postdata.id}
         

         {postdata.title}
         

         {postdata.date}
      
   )
}
export async function getstaticpaths() {
   const paths = getallpostids()
   return {
      paths,
      fallback: false
   }
}
export async function getstaticprops({ params }) {
   const postdata = getpostdata(params.id)
      return {
      props: {
         postdata
      }
   }
}

posts.js

post.js 包含 getallpostids() 方法来获取 ids 和 getpostdata() 方法来获取相应的内容。

posts.js

export function getpostdata(id) {
   const postone = {
      title: 'one',
      id: 1,
      date: '7/12/2020'
   }
   const posttwo = {
      title: 'two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postone;
   }else if(id == 'two'){
      return posttwo;
   }  
}
export function getallpostids() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

启动 next.js 服务器

运行以下命令启动服务器

$ npm run dev

在浏览器中打开 localhost:3000/posts/one ，将看到以下输出。

在浏览器中打开 localhost:3000/posts/two ，将看到以下输出。