【揭秘Next.js】解鎖高級路由的奧秘與實戰技巧

媒介

Next.js 是一個風行的 JavaScript 框架，用於構建伺服器端襯著（SSR）跟靜態站點生成（SSG）的利用順序。它簡化了 React 利用順序的開辟流程，並供給了很多內置功能，包含高等路由處理。本文將深刻探究 Next.js 的高等路由功能，並供給一些實戰技能。

Next.js 路由基本

在 Next.js 中，路由是經由過程文件體系來定義的。每個頁面都對應一個文件，平日位於 pages 目錄下。比方，pages/index.js 對應於主頁，pages/about.js 對應於對於頁面。

路由文件命名規矩

• 文件名不辨別大小寫。
• 文件名不克不及包含 .js 擴大名。
• 文件名可能是靜態的，比方 pages/posts/[id].js。

靜態路由參數

Next.js 容許利用靜態路由參數，這些參數在文件名中利用方括弧表示。比方，pages/posts/[id].js 中的 [id] 是一個靜態參數，它會在懇求中作為查詢參數轉達。

高等路由功能

路由重定向

Next.js 容許利用 next/router 包中的 router.push 或 router.replace 方法停止路由重定向。

import { useRouter } from 'next/router';

const router = useRouter();

router.push('/new-path');

路由保衛

Next.js 支撐路由保衛，容許在路由載入前履行邏輯，比方用戶認證。

export async function getServerSideProps(context) {
  // 檢查用戶認證
  if (!context.req.session.isAuthenticated) {
    // 重定向到登錄頁面
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
}

靜態天活路由

Next.js 容許靜態天活路由，這對內容管理體系（CMS）特別有效。

export async function getStaticPaths() {
  // 獲取全部文章
  const articles = await getAllArticles();

  // 為每篇文章生成一個路由
  return {
    paths: articles.map((article) => ({
      params: { id: article.id.toString() },
    })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // 獲取文章
  const article = await getArticleById(params.id);

  return {
    props: {
      article,
    },
  };
}

實戰技能

利用 Next.js 官方路由庫

固然 Next.js 容許利用自定義路由邏輯，但倡議利用官方的 next/router 庫，因為它與 Next.js 的其他功能（如頁面載入狀況）集成得很好。

利用 Next.js 的數據獲取方法

Next.js 供給了 getServerSideProps、getStaticProps 跟 getStaticPaths 等方法，用於在伺服器端獲取數據。這些方法可能與高等路由功能結合利用，以實現更複雜的利用順序邏輯。

優化機能

在 Next.js 利用順序中利用高等路由時，要注意機能優化。比方，利用 getStaticProps 預襯著頁面可能增加伺服器負載跟進步頁面載入速度。

結論

Next.js 的高等路由功能為開辟者供給了富強的東西來構建複雜的 React 利用順序。經由過程懂得並利用這些功能，可能創建出高機能、可保護的利用順序。