Next.js链接到动态路径

在本文中，我们将学习如何在我们的Next.js项目中创建和链接动态路径。NextJS是一个基于React的框架。它具有为不同平台（如Windows，Linux和Mac）开发美丽的Web应用程序的能力。动态路径的链接有助于有条件地渲染您的NextJS组件。

创建NextJS应用程序： 您可以使用以下命令创建一个新的Next.js项目：

npx create-next-app GFG

项目结构： 它将如下所示。

Next.js链接到动态路径

创建动态路径： 在Next.js中，我们可以通过在页面名称中添加括号来创建动态路由。在这里，我们将创建一个名为gfg的文件夹，在该文件夹中，我们将创建我们的文件[id].js，如下所示。

Next.js链接到动态路径

文件名: [id].js 现在我们将在此文件中使用useRouter()函数来显示我们的路径。

Javascript

// Importing useRouter() 
import { useRouter } from 'next/router'
  
const Gfg = () => { 
  
  // Initializing useRouter() 
  const router = useRouter() 
  
  return <h1>Path :- {router.query.id} </h1> 
} 
  
export default Gfg;

运行应用的步骤： 现在通过运行以下命令启动应用程序。

npm start

输出结果：

Next.js链接到动态路径

将动态路径链接起来： 在Next.js中，我们可以使用Link组件轻松链接到动态路径。在index.js文件中添加以下代码。

文件名：index.js

Javascript

// Import Link component 
import Link from 'next/link'
  
export default function Home() { 
  return ( 
    <div> 
      {/* Adding Heading */} 
      <h1> 
        This is Homepage 
      </h1> 
      {/* Adding Buttons */} 
      <Link href='/gfg/abc'> 
      <a> 
        <button>Go to gfg/abc</button> 
      </a> 
      </Link> 
      <br/> 
      <Link href='/gfg/123'> 
      <a> 
        <button>Go to gfg/123</button> 
      </a> 
      </Link> 
      <br/> 
      <Link href='/gfg/abc123'> 
      <a> 
        <button>Go to gfg/abc123</button> 
      </a> 
      </Link> 
    </div> 
  ) 
}

运行应用程序的步骤: 现在通过运行以下命令启动应用程序。