Next.js next/link

Next.js 是一个流行的开源框架，建立在React之上，旨在帮助开发人员构建服务器渲染的React应用程序。它具有强大的功能之一是能够创建客户端页面之间的过渡，而不触发完整的页面重新加载，这要归功于内置的next/link组件。在本文中，我们将通过构建一个小型的Next.js应用程序来学习如何使用next/link。

什么是next/link？

next/link 是一个React组件，允许您在Next.js应用程序中创建页面之间的链接。与常规的HTML锚标签不同，当用户点击链接时， next/link 不会触发完整的页面重新加载。相反，它使用客户端导航来加载新页面，同时保留应用程序的当前状态。这意味着您的应用程序将感觉更快，对用户更具响应性。

语法: 使用 Link 的语法很简单。您可以从 next/link 模块导入该组件：

// Import
import Link from 'next/link';

// Link component
<Link href="/page">New Page</Link>

然后，您可以在JSX代码中使用Link组件创建到另一个页面的链接。 href属性指定要链接到的页面的URL，Link组件的子元素是链接的内容。

创建NextJS应用程序： 打开终端或命令提示符，运行以下命令

npx create-next-app next-link

导航到您的应用/项目目录：

cd next-link

项目结构：

Next.js next/link

‘next/link’的基本用法： 在这个示例中，我们将创建一个简单的Next.js应用程序，包含两个页面： home 和 about 。我们将使用 next/link 来在页面之间创建链接。

在项目的根目录下创建一个名为 pages 的新目录。这是你将存储Next.js页面的地方。在 pages 目录中创建一个名为 index.js 的新文件。这将是你的应用程序的 home 页面。将以下代码添加到 index.js 中：

文件名：index.js

import Link from 'next/link'; 
  
export default function Home() { 
    return ( 
        <div> 
            <h1>Welcome to my Next.js app!</h1> 
            <Link href="/about">About Us</Link> 
        </div> 
    ); 
}

在pages目录下创建一个名为 about.js 的新文件。

文件名：about.js

import Link from 'next/link'; 
  
export default function About() { 
    return ( 
        <div> 
            <h1>About Us</h1> 
            <p>We are a small team of developers.</p> 
            <Link href="/">Home</Link> 
        </div> 
    ); 
}

运行应用程序 或使用以下命令运行开发服务器：

npm run dev

打开你的网络浏览器并导航到 http://localhost:3000。你应该看到你的应用程序的主页，其中有一个链接指向关于页面。点击链接导航到关于页面。你应该看到关于页面，并有一个链接返回主页页面。

输出：

Next.js next/link

在这个示例中，我们创建了一个基本的Next.js应用程序，其中包含两个页面和一个链接。我们从 next/link 中导入 Link 组件，并使用它创建了一个链接到 about 页面。当用户点击该链接时，Next.js使用客户端导航加载 about 页面，而不触发完整的页面重新加载。

使用‘next/link’进行动态路由： 在这个示例中，我们将使用 next/link 创建一个具有动态路由功能的Next.js应用程序。在 pages 目录下创建一个名为 blog/[slug].js 的新文件。这个文件将用于显示个别的 blog 帖子。

文件名：blog/[slug].js：

import { useRouter } from 'next/router'; 
import Link from 'next/link'; 
export default function BlogPost() { 
    const router = useRouter(); 
    const { slug } = router.query; 
  
    return ( 
        <div> 
            <h1>{slug}</h1> 
            <p>This is a blog post with the slug {slug}.</p> 
            <Link href='/'>Go to Home</Link> 
        </div> 
    ); 
}

修改 index.js 以包含带有指向个别 post 页面的博客文章列表：

import Link from 'next/link'; 
  
const posts = [ 
    { slug: 'post-1', title: 'Post 1' }, 
    { slug: 'post-2', title: 'Post 2' }, 
    { slug: 'post-3', title: 'Post 3' }, 
]; 
  
export default function Home() { 
    return ( 
        <div> 
            <h1>Welcome to my Next.js app!</h1> 
            <ul> 
                {posts.map(post => ( 
                    <li key={post.slug}> 
                        <Link href={`/blog/${post.slug}`}> 
                            {post.title} 
                        </Link> 
                    </li> 
                ))} 
            </ul> 
        </div> 
    ); 
}

使用以下命令运行开发服务器：

npm run dev

打开您的网络浏览器并导航到 http://localhost:3000 。您应该看到您的应用程序的主页，其中列出了一系列博客帖子。点击其中一个链接，导航到单独的帖子页面。您应该会在URL中看到相应的博客帖子 slug 。

输出：

Next.js next/link

在这个示例中，我们演示了如何使用 next/link 进行动态路由。我们为每个博客文章创建了一个新的页面模板，并使用 Link 创建链接到每个单独的文章页面。我们还使用 next/router 的 useRouter 钩子来访问URL中的 slug 参数，并显示相应的博客文章。

总之， next/link 是一个强大的工具，可以简化Next.js应用程序中的导航，实现快速和响应式的客户端渲染。其简单明了的语法和易用性使其成为开发人员在页面之间创建链接和动态路由时的首选。