下一个JS中的链接：详细指南-DEV365 开发者社区

在本文中，我们将了解下一个JS。为此，我们假设您熟悉下一个JS，我们将直接进入下一个JS

中的链接主题

NextJS路由器系统：客户端和服务器端路由

在现代Web应用程序中，强大的路由器系统非常重要。下一个JS路由器系统就是一个这样的系统，它简化了客户端和服务器端导航

让我们考虑NextJs如何有效地处理这两种类型的路由

使用链接组件在接下来的JS中的客户端导航

Next JS具有基于文件系统的自动路由。您拥有pages目录，并且页面内部的文件和文件夹会自动变为路由，从而易于设置客户端端导航

例如：当您在页面目录中创建一个新文件时，下一个JS会自动为该文件创建一个新路由。就像您在页面目录中创建了一个带有公司信息的文件，并将其命名为about.js

下一个JS将创建一个名为/about的新路由，指向该文件

// pages/about.js

import React from 'react';

const About = () => (
  <div>
    <h1>About the company</h1>
    <p>Some information about the company whose about page this is.</p>
  </div>
);

export default About;

创建客户端导航

对于客户端导航，我们具有内置的链接组件，您需要将链接组件包裹在 tags so as to enable client side navigation without page reload

周围

这减少了加载时间并改善用户导航

// components/Navbar.js

import React from 'react';
import Link from 'next/link';

const Navbar = () => (
  <nav>
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About</a>
        </Link>
      </li>
    </ul>
  </nav>
);

export default Navbar;

与传统锚标签相比，优点和缺点

优点

更快的导航
自动代码拆分
next.js功能的成绩

缺点

需要JavasCritpt与传统锚标签不同

服务器端渲染

在服务器端，渲染网页的内容是在服务器上生成的，而不是客户端的浏览器。

这包括服务器获取数据，渲染HTML并将完全格式的网页发送到客户端

本文由DeadSimplechat聊天API和SDK带给您您的网站和应用程序

这可以显着提高性能，SEO和用户体验，并且大多数CPU和渲染资源都花在服务器上，并且客户端几乎没有工作

在接下来的JS中，我们可以使用getServersideProps函数来实现服务器端数据获取并优化页面渲染

让我们考虑一个更好地理解这一点的例子。在这里，我们将通过服务器端渲染获取并显示用户的个人资料页

// pages/profile.js

import React from 'react';

const Profile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>Email: {user.email}</p>
  </div>
);

export default Profile;

export async function getServerSideProps(context) {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); // Fetch user data from API
  const user = await response.json();

  return {
    props: { user }
  };
}

在这里，我们正在使用下一个JS高效和内置的路由器系统来增强我们的开发过程

用户钩及其功能

useRouter是IR下一个JS提供的自定义挂钩。在useRouter Hook的帮助下，您可以访问和操纵基本路由信息，例如

更改查询参数的能力
编程浏览应用程序

好处

能够访问查询参数的能力
有条件渲染和基于路由获取数据的能力
能够编程导航的能力

例子

创建应用程序

使用create-next-app
创建一个新的下一个JS应用程序

npx create-next-app my-next-app
cd my-next-app

接下来创建一个名为about.js的新文件

// pages/about.js

import React from 'react';

const About = () => (
  <div>
    <h1>About</h1>
    <p>Information about the company</p>
  </div>
);

export default About;

现在我们已经创建了关于页面的关于“主页”页面的链接

转到您的index.js文件，然后将链接添加到“关于”页面

// pages/index.js

import React from 'react';
import Link from 'next/link';

const Index = () => (
  <div>
    <h1>Home</h1>
    <p>This is the Home page.</p>
    <Link href="/about">About Page</Link>
  </div>
);

export default Index;

接下来，我们通过
启动开发服务器

npm run dev

然后，该应用将在Localhost 3000上运行。您可以在浏览器中打开它以查看应用程序

您可以在此处看到实时应用程序：https://codesandbox.io/p/sandbox/vigorous-wind-6wygcf?file=/pages/index.js:14,22

链接构建最佳实践和技术

预取

这是一种在视图中出现后立即在后台预加载页面的技术

这会更好地利用网络和系统抛光，以便在用户需要时可以显示页面。

可以显示。

用链接组件预取

默认情况下的组件预取页页。当应用程序以生产模式运行时，NextJS出现在fiewport

中时会自动预取页。

如果您想禁用此行为。如果用户在计量连接上，则可以节省网络资源

仅在用户滚动到视口中的用户滚动时，系统才下载数据。

您可以通过prefetch = {false} prop
来禁用此行为

<Link href="/dashboard" prefetch={false}>
  Dashboard
</Link>

动态路线段

这些是基于路由参数创建的灵活URL。

这些允许您在没有多个静态路由的情况下创建，对于您想创建页面而不定义路由的用例

在Next.js动态路由中，通过将括号（[]）添加到文件名中来表示[userId] .js等。

如何在NextJS中使用UserOuter

用户图是一种易于使用的工具，可以从动态路由访问路由参数。

用户钩为您提供了一个查询对象，该对象将包含解析参数

让我们考虑一个编码示例，以了解有关此

的更多信息

在这里，我们正在创建动态路线页/博客/[id]/。js

// pages/blog/[id].js

import React from 'react';
import { useRouter } from 'next/router';

const BlogPost = ({ post }) => {
  // get the id from the router
  const router = useRouter();
  const { id } = router.query;

  // get the blog post data from the id
  // ...

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default BlogPost;

链接包装和自定义样式

使用NextJS，您可以将自定义样式应用于组件。如果组件的子组件是样式的组件，则必须通过passhref才能具有适当的功能

import Link from 'next/link';
import styled from 'styled-components';

// This creates a custom styled component
const RedLink = styled.a`
  color: red;
`;
function NavLink({ href, name }) {
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}

export default NavLink;

NextJ还通过CSS模块和样式的JSX支持范围的CSS

// components/MyLink.module.css

.link {
  color: blue;
  text-decoration: none;
}

// components/MyLink.js

import Link from 'next/link';
import styles from './MyLink.module.css';

const MyLink = ({ href, text }) => (
  <Link href={href}>
    <a className={styles.link}>{text}</a>
  </Link>
);

export default MyLink;

使用样式的JSX

import Link from 'next/link';

const MyLink = ({ href, text }) => (
  <Link href={href}>
    <a>
      {text}
      <style jsx>{`
        a {
          color: blue;
          text-decoration: none;
        }
      `}</style>
    </a>
  </Link>
);

export default MyLink;

如何处理NextJ中的外部链接

要处理NextJ中的外部链接，您必须使用传统的 tags to navigate to external links in nextjs

这些链接指向NextJS应用程序以外的外部页面

显示外部链接的示例使用

// pages/index.js

import React from 'react';
import Link from 'next/link';

const Index = () => (
  <div>
    <h1>Home</h1>
    <p>This is the Home page.</p>

    {/* Internal link using the Link component */}
    <Link href="/about">
      <a>About Us</a>
    </Link>

    {/* External link using the plain HTML <a> tag */}
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
      Visit Example.com
    </a>
  </div>
);

export default Index;

在此示例中，我们正在使用链接组件进行内部用法，并使用锚标签 for link that are external from the nextjs app

修复NextJ中常见的链接问题

自定义组件中缺少passhref

您可能会遇到组件不会将HREF传递到自定义样式组件内的嵌套组件的问题

这可能是因为您已经忘记了passHref支柱到链接组件，您需要通过它来确保正确的功能

错误地使用动态路线

在没有用户挂钩的情况下以编程方式使用导航启用访问路由参数和程序化导航。

例子

import { useRouter } from 'next/router';

function LoginForm() {
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Validate and process form data...
    const isSuccess = true;

    // Navigate programmatically if successful
    if (isSuccess) {
      router.push('/dashboard');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form inputs here */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default LoginForm;

通过在NextJ中解决这些常见问题，我们可以具有平稳的导航和用户体验

在我们的应用程序中实施最佳实践将导致更好地处理边缘案例和我们的应用程序的良好性能

与基于React的库集成

在本节中，我们将了解与NextJ相符的不同UI库以及如何在项目中安装和使用它们

步骤1安装

您可以轻松地使用NPM安装任何库。出于演示目的，我们将使用材料UI

npm install @mui/material @emotion/react @emotion/styled

步骤2在下一个JS应用中添加库

在NextJS应用程序中导入并配置UI组件

对于材料UI，我们需要在页面目录中创建一个_document.js文件。然后包括所需的配置

// pages/_document.js

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@mui/styles";
import theme from "../src/theme";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheet = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheet.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        {sheet.getStyleElement()}
      </>
    ),
  };
};

export default MyDocument;

交叉引用到下一个JS到外部库的组件

现在您已经设置了库，就可以使用nextjs中的组件

让我们使用材料UI中的AppBar组件并将其集成到Next.js组件中的导航

创建Appbar

在我们的NextJS项目的组件文件夹中创建一个新文件，称为AppNavbar.js，包含Appbar配置

// components/AppNavbar.js

import React from "react";
import { AppBar, Toolbar, Typography } from "@mui/material";
import Link from "next/link";

const AppNavbar = () => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Link href="/" passHref>
          <Typography variant="h6" component="a">
            Home
          </Typography>
        </Link>
        <Link href="/about" passHref>
          <Typography variant="h6" component="a">
            About
          </Typography>
        </Link>
      </Toolbar>
    </AppBar>
  );
};

export default AppNavbar;

我们在此处使用了Passhref Prop，因为我们使用的是带有标签的自定义组件

通过第三方图书馆优化性能

让我们看看如何在集成第三方库时如何优化性能

树木摇动：树木摇动仅涉及使用所需的组件并丢弃其他组件
优化图像：下一个/图像组件会自动优化和调整图像，以适应更快的老挝时间
懒惰的加载：懒惰加载数据可改善性能并导致有效的资源利用。只有所需的资源才加载。您可以在Next.js中使用react.lazy（）indonuilt函数来加载应用程序组件

需要您的网站或应用程序的Chat API

iDeadSimpleChat是聊天API提供商

在几分钟内将可扩展的聊天添加到您的应用程序
1000万在线并发用户
99.999％正常运行时间
节制功能
1-1聊天
小组聊天
完全自定义
聊天API和SDK
预建聊天

结论

在本文中，我们了解了下一个JS生态系统中的下一个JS和链接

我们了解了启用客户端导航的组件。

我们还了解了用户钩，我们将它们都与传统的

进行了比较。

我们还讨论了如何通过使用 tags

从下一个JS应用程序导航到外部链接

我们考虑了可能的实例

本文由deadsimplechat，Chat API 为您带给您网站和app

我希望您喜欢这篇文章。谢谢您的阅读。