MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Next.js动态路由在实际项目中的应用案例

2022-04-021.3k 阅读

Next.js 动态路由基础概述

在深入探讨 Next.js 动态路由在实际项目中的应用案例之前，我们先来回顾一下 Next.js 动态路由的基本概念。

Next.js 路由系统简介

Next.js 拥有一套强大且灵活的路由系统，它基于文件系统进行路由映射。在 Next.js 项目中，pages 目录下的每个文件都会自动映射到一个路由。例如，pages/about.js 会映射到 /about 路由。这种基于文件系统的路由方式，极大地简化了路由配置过程，使得开发者能够快速搭建应用的路由结构。

动态路由原理

Next.js 的动态路由允许我们创建能够处理不同参数的页面。动态路由页面的文件名遵循特定的格式，即在方括号 [] 内定义参数名。例如，pages/post/[id].js 表示这是一个动态路由页面，其中 id 是参数名。当访问类似于 /post/123 的 URL 时，123 这个值就会作为 id 参数传递给 [id].js 页面组件。

Next.js 通过在服务器端或客户端解析 URL 来实现动态路由。在服务器端渲染（SSR）模式下，Next.js 服务器在接收到请求时，会根据请求的 URL 匹配对应的动态路由页面，并将参数传递给页面组件。在客户端渲染（CSR）模式下，当用户在浏览器中导航到动态路由页面时，Next.js 客户端会解析 URL 并加载相应的页面组件。

动态路由参数获取

在动态路由页面组件中，我们可以通过 getStaticProps 或 getServerSideProps 函数获取路由参数。以 pages/post/[id].js 为例：

import React from 'react';

export async function getStaticProps(context) {
    const { id } = context.params;
    // 可以根据 id 从数据库或 API 获取数据
    return {
        props: {
            postId: id
        },
        revalidate: 60 // 如果使用增量静态再生，设置重新验证时间
    };
}

const PostPage = ({ postId }) => {
    return (
        <div>
            <p>Post ID: {postId}</p>
        </div>
    );
};

export default PostPage;

在上述代码中，context.params 包含了从 URL 中解析出来的参数，我们通过解构获取 id 参数，并将其作为属性传递给 PostPage 组件。

电商产品详情页：动态路由的典型应用

电商应用是动态路由的常见应用场景之一，产品详情页就是一个很好的例子。

产品详情页需求分析

在电商平台中，每个产品都有唯一的标识符（如产品 ID）。用户通过点击产品列表中的某个产品，进入对应的产品详情页，查看产品的详细信息，包括图片、描述、价格等。为了实现这一功能，我们需要为每个产品创建一个独立的页面，并且能够根据不同的产品 ID 加载相应的产品数据。

实现产品详情页动态路由

  1. 创建动态路由页面 在 Next.js 项目的 pages 目录下创建 product/[productId].js 文件，这就是产品详情页的动态路由页面。
import React from 'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId } = context.params;
    const product = await getProductById(productId);
    return {
        props: {
            product
        },
        revalidate: 60
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;
  1. 模拟 API 获取产品数据 假设我们有一个 getProductById 函数来从 API 或数据库获取产品数据，这里简单模拟一下：
// lib/api.js
const products = [
    { id: '1', title: 'Product 1', imageUrl: '/images/product1.jpg', description: 'This is product 1', price: 100 },
    { id: '2', title: 'Product 2', imageUrl: '/images/product2.jpg', description: 'This is product 2', price: 200 }
];

export const getProductById = (id) => {
    return products.find(product => product.id === id);
};
  1. 在产品列表页链接到产品详情页 在产品列表页（如 pages/products.js）中，我们需要为每个产品创建链接到详情页的按钮或链接：
import React from'react';
import Link from 'next/link';
import { products } from '../lib/api';

const ProductsPage = () => {
    return (
        <div>
            {products.map(product => (
                <div key={product.id}>
                    <h2>{product.title}</h2>
                    <Link href={`/product/${product.id}`}>
                        <a>View Details</a>
                    </Link>
                </div>
            ))}
        </div>
    );
};

export default ProductsPage;

处理产品变体

在一些电商场景中，产品可能有不同的变体，如颜色、尺寸等。我们可以通过在动态路由中添加更多参数来处理这些变体。例如，pages/product/[productId]/[variant].js：

import React from'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId, variant } = context.params;
    const product = await getProductById(productId);
    // 根据 variant 获取特定变体的数据
    const variantData = product.variants.find(v => v.name === variant);
    return {
        props: {
            product,
            variantData
        },
        revalidate: 60
    };
}

const ProductVariantPage = ({ product, variantData }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <p>Variant: {variantData.name}</p>
            <p>{variantData.description}</p>
            <p>Price: ${variantData.price}</p>
        </div>
    );
};

export default ProductVariantPage;

博客文章系统：动态路由与内容管理

博客系统也是 Next.js 动态路由的重要应用场景，它涉及到文章的展示、分类和标签等功能。

博客文章展示

  1. 创建文章动态路由页面 在 pages/blog/[slug].js 创建文章详情页，其中 slug 是文章的唯一标识，通常是文章标题的简化字符串。
import React from'react';
import { getPostBySlug } from '../lib/api';

export async function getStaticProps(context) {
    const { slug } = context.params;
    const post = await getPostBySlug(slug);
    return {
        props: {
            post
        },
        revalidate: 60
    };
}

const BlogPostPage = ({ post }) => {
    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.date}</p>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
    );
};

export default BlogPostPage;
  1. 获取文章数据 假设我们有一个 getPostBySlug 函数来从数据库或文件系统获取文章数据：
// lib/api.js
const posts = [
    { slug: 'first - post', title: 'My First Post', date: '2023 - 01 - 01', content: '<p>This is the content of the first post.</p>' },
    { slug: 'second - post', title: 'My Second Post', date: '2023 - 02 - 01', content: '<p>This is the content of the second post.</p>' }
];

export const getPostBySlug = (slug) => {
    return posts.find(post => post.slug === slug);
};
  1. 在博客列表页链接到文章详情页 在 pages/blog.js 博客列表页中，为每篇文章创建链接：
import React from'react';
import Link from 'next/link';
import { posts } from '../lib/api';

const BlogPage = () => {
    return (
        <div>
            {posts.map(post => (
                <div key={post.slug}>
                    <h2>{post.title}</h2>
                    <p>{post.date}</p>
                    <Link href={`/blog/${post.slug}`}>
                        <a>Read More</a>
                    </Link>
                </div>
            ))}
        </div>
    );
};

export default BlogPage;

文章分类与标签

  1. 分类页面动态路由 为了实现文章分类，我们可以创建 pages/blog/category/[category].js 页面。
import React from'react';
import { getPostsByCategory } from '../lib/api';

export async function getStaticProps(context) {
    const { category } = context.params;
    const posts = await getPostsByCategory(category);
    return {
        props: {
            posts,
            category
        },
        revalidate: 60
    };
}

const CategoryPage = ({ posts, category }) => {
    return (
        <div>
            <h1>{category} Posts</h1>
            {posts.map(post => (
                <div key={post.slug}>
                    <h2>{post.title}</h2>
                    <p>{post.date}</p>
                    <Link href={`/blog/${post.slug}`}>
                        <a>Read More</a>
                    </Link>
                </div>
            ))}
        </div>
    );
};

export default CategoryPage;
  1. 标签页面动态路由 类似地，对于标签，创建 pages/blog/tag/[tag].js 页面。
import React from'react';
import { getPostsByTag } from '../lib/api';

export async function getStaticProps(context) {
    const { tag } = context.params;
    const posts = await getPostsByTag(tag);
    return {
        props: {
            posts,
            tag
        },
        revalidate: 60
    };
}

const TagPage = ({ posts, tag }) => {
    return (
        <div>
            <h1>{tag} Posts</h1>
            {posts.map(post => (
                <div key={post.slug}>
                    <h2>{post.title}</h2>
                    <p>{post.date}</p>
                    <Link href={`/blog/${post.slug}`}>
                        <a>Read More</a>
                    </Link>
                </div>
            ))}
        </div>
    );
};

export default TagPage;
  1. 更新文章数据结构与获取函数 我们需要在文章数据结构中添加分类和标签信息，并更新获取函数。
// lib/api.js
const posts = [
    { slug: 'first - post', title: 'My First Post', date: '2023 - 01 - 01', content: '<p>This is the content of the first post.</p>', category: 'Tech', tags: ['JavaScript', 'Next.js'] },
    { slug: 'second - post', title: 'My Second Post', date: '2023 - 02 - 01', content: '<p>This is the content of the second post.</p>', category: 'Life', tags: ['Travel', 'Food'] }
];

export const getPostsByCategory = (category) => {
    return posts.filter(post => post.category === category);
};

export const getPostsByTag = (tag) => {
    return posts.filter(post => post.tags.includes(tag));
};

多语言网站：动态路由与国际化

在构建多语言网站时，动态路由可以帮助我们轻松实现语言切换和不同语言版本内容的展示。

语言切换需求分析

多语言网站需要根据用户选择的语言展示相应的内容。通常，我们通过 URL 中的语言代码来标识用户想要的语言版本。例如，/en/about 表示英文的关于页面，/zh/about 表示中文的关于页面。

实现多语言动态路由

  1. 创建语言动态路由页面 在 pages/[lang]/[page].js 创建动态路由页面，这里 lang 表示语言代码，page 表示具体页面名称。
import React from'react';
import { getTranslatedContent } from '../lib/i18n';

export async function getStaticProps(context) {
    const { lang, page } = context.params;
    const content = await getTranslatedContent(lang, page);
    return {
        props: {
            content,
            lang
        },
        revalidate: 60
    };
}

const LanguagePage = ({ content, lang }) => {
    return (
        <div>
            <h1>{content.title}</h1>
            <p>{content.body}</p>
        </div>
    );
};

export default LanguagePage;
  1. 获取翻译内容 假设我们有一个 getTranslatedContent 函数来从翻译文件或 API 获取翻译后的内容：
// lib/i18n.js
const translations = {
    en: {
        about: { title: 'About Us', body: 'This is the English about page content.' },
        home: { title: 'Home', body: 'This is the English home page content.' }
    },
    zh: {
        about: { title: '关于我们', body: '这是中文的关于页面内容。' },
        home: { title: '首页', body: '这是中文的首页内容。' }
    }
};

export const getTranslatedContent = (lang, page) => {
    return translations[lang][page];
};
  1. 实现语言切换链接 在页面中添加语言切换链接，例如在 pages/[lang]/home.js 中：
import React from'react';
import Link from 'next/link';
import { getTranslatedContent } from '../lib/i18n';

export async function getStaticProps(context) {
    const { lang } = context.params;
    const content = await getTranslatedContent(lang, 'home');
    return {
        props: {
            content,
            lang
        },
        revalidate: 60
    };
}

const HomePage = ({ content, lang }) => {
    return (
        <div>
            <h1>{content.title}</h1>
            <p>{content.body}</p>
            <Link href={`/en/home`}>
                <a>English</a>
            </Link>
            <Link href={`/zh/home`}>
                <a>中文</a>
            </Link>
        </div>
    );
};

export default HomePage;

处理默认语言与重定向

我们可以设置一种默认语言，当用户访问没有指定语言代码的 URL 时，重定向到默认语言版本。例如，设置英文为默认语言：

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

const IndexPage = () => {
    const router = useRouter();
    useEffect(() => {
        if (!router.query.lang) {
            router.push('/en/home');
        }
    }, [router]);

    return (
        <div>
            {/* 页面内容 */}
        </div>
    );
};

export default IndexPage;

动态路由与 SEO 优化

在实际项目中，SEO 优化是至关重要的，Next.js 的动态路由在这方面也有很多可优化的点。

动态路由页面的元数据设置

  1. 页面标题与描述 对于动态路由页面，我们需要根据页面内容设置合适的标题和描述。以博客文章详情页为例，在 pages/blog/[slug].js 中：
import React from'react';
import { getPostBySlug } from '../lib/api';
import Head from 'next/head';

export async function getStaticProps(context) {
    const { slug } = context.params;
    const post = await getPostBySlug(slug);
    return {
        props: {
            post
        },
        revalidate: 60
    };
}

const BlogPostPage = ({ post }) => {
    return (
        <div>
            <Head>
                <title>{post.title}</title>
                <meta name="description" content={post.excerpt} />
            </Head>
            <h1>{post.title}</h1>
            <p>{post.date}</p>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
    );
};

export default BlogPostPage;
  1. 规范 URL 结构 确保动态路由的 URL 结构简洁且易于理解，符合搜索引擎的喜好。例如，对于产品详情页，使用 /product/[productId] 而不是 /product?id=[productId] 的形式。这样的 URL 更清晰，也有助于搜索引擎抓取和索引。

预渲染与索引

  1. 静态页面生成（SSG） 通过 getStaticProps 进行静态页面生成可以提高搜索引擎的抓取效率。搜索引擎爬虫可以直接访问预渲染好的 HTML 页面，获取页面内容。例如在电商产品详情页中：
import React from'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId } = context.params;
    const product = await getProductById(productId);
    return {
        props: {
            product
        },
        revalidate: 60
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;
  1. 动态路由的静态路径生成 在使用 getStaticProps 时，我们可以通过 getStaticPaths 函数生成静态路径，这对于动态路由页面的预渲染和索引非常重要。以博客文章列表为例，假设我们有很多文章，我们可以通过 getStaticPaths 生成所有文章的静态路径：
import React from'react';
import { getPosts } from '../lib/api';
import Head from 'next/head';

export async function getStaticPaths() {
    const posts = await getPosts();
    const paths = posts.map(post => ({
        params: { slug: post.slug }
    }));
    return { paths, fallback: false };
}

export async function getStaticProps(context) {
    const { slug } = context.params;
    const post = await getPostBySlug(slug);
    return {
        props: {
            post
        },
        revalidate: 60
    };
}

const BlogPostPage = ({ post }) => {
    return (
        <div>
            <Head>
                <title>{post.title}</title>
                <meta name="description" content={post.excerpt} />
            </Head>
            <h1>{post.title}</h1>
            <p>{post.date}</p>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
    );
};

export default BlogPostPage;

动态路由的性能优化

为了确保应用在使用动态路由时具有良好的性能，我们需要进行一些性能优化措施。

代码分割与懒加载

  1. 动态路由组件的代码分割 Next.js 会自动对页面组件进行代码分割。对于动态路由页面，这意味着只有当用户访问到特定的动态路由页面时，相关的代码才会被加载。例如在 pages/product/[productId].js 中，只有当用户访问某个产品详情页时，该页面的代码才会被下载到客户端。
  2. 懒加载非关键组件 在动态路由页面中，如果有一些非关键组件（如产品详情页中的推荐产品列表），我们可以使用 React.lazy 和 Suspense 进行懒加载。
import React, { lazy, Suspense } from'react';
import { getProductById } from '../lib/api';

const RecommendedProducts = lazy(() => import('../components/RecommendedProducts'));

export async function getStaticProps(context) {
    const { productId } = context.params;
    const product = await getProductById(productId);
    return {
        props: {
            product
        },
        revalidate: 60
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
            <Suspense fallback={<div>Loading recommended products...</div>}>
                <RecommendedProducts productId={product.id} />
            </Suspense>
        </div>
    );
};

export default ProductPage;

缓存策略

  1. 浏览器缓存 我们可以通过设置合适的 HTTP 缓存头来利用浏览器缓存。对于动态路由页面，如果内容不经常变化，可以设置较长的缓存时间。在 Next.js 中，可以在 getStaticProps 或 getServerSideProps 中设置缓存头。例如：
import React from'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId } = context.params;
    const product = await getProductById(productId);
    return {
        props: {
            product
        },
        revalidate: 60,
        headers: {
            'Cache - Control':'s - maxage=86400, stale - while - revalidate'
        }
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;
  1. 服务器端缓存 对于频繁访问的动态路由页面，可以在服务器端设置缓存。例如，使用 Redis 等缓存工具，在获取数据时先检查缓存中是否有数据，如果有则直接返回缓存数据，减少数据库或 API 的请求次数。

处理高并发访问

  1. 负载均衡 在实际项目中，可能会有大量用户同时访问动态路由页面。通过负载均衡器可以将请求均匀分配到多个服务器实例上，避免单个服务器过载。常见的负载均衡器有 Nginx、HAProxy 等。
  2. 队列与限流 可以使用消息队列（如 RabbitMQ、Kafka）来处理高并发请求，将请求放入队列中依次处理。同时，通过限流措施（如限制每个 IP 地址的请求频率）来防止恶意请求或过多请求导致系统崩溃。

动态路由的错误处理

在使用动态路由时，难免会遇到各种错误情况，我们需要妥善处理这些错误，以提供良好的用户体验。

参数验证与错误处理

  1. 验证动态路由参数 在动态路由页面的 getStaticProps 或 getServerSideProps 中，对参数进行验证。例如在 pages/product/[productId].js 中：
import React from'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId } = context.params;
    if (!productId || isNaN(parseInt(productId))) {
        return {
            notFound: true
        };
    }
    const product = await getProductById(productId);
    if (!product) {
        return {
            notFound: true
        };
    }
    return {
        props: {
            product
        },
        revalidate: 60
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;
  1. 自定义错误页面 当参数验证失败或数据获取失败时，我们可以返回 notFound: true，Next.js 会自动渲染 pages/404.js 页面。我们也可以自定义错误处理逻辑，创建更友好的错误页面。例如，在 pages/error.js 中：
import React from'react';

const ErrorPage = ({ statusCode }) => {
    return (
        <div>
            <h1>Error {statusCode}</h1>
            <p>Something went wrong.</p>
        </div>
    );
};

export default ErrorPage;

然后在 getStaticProps 或 getServerSideProps 中通过设置 statusCode 来返回自定义错误页面：

import React from'react';
import { getProductById } from '../lib/api';

export async function getStaticProps(context) {
    const { productId } = context.params;
    if (!productId || isNaN(parseInt(productId))) {
        return {
            statusCode: 400,
            props: {}
        };
    }
    const product = await getProductById(productId);
    if (!product) {
        return {
            statusCode: 404,
            props: {}
        };
    }
    return {
        props: {
            product
        },
        revalidate: 60
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>{product.title}</h1>
            <img src={product.imageUrl} alt={product.title} />
            <p>{product.description}</p>
            <p>Price: ${product.price}</p>
        </div>
    );
};

export default ProductPage;

网络错误处理

  1. 数据获取时的网络错误 在通过 API 获取数据时，可能会遇到网络错误。我们可以使用 try - catch 块来捕获错误，并在页面上显示友好的提示信息。例如在 pages/blog/[slug].js 中：
import React from'react';
import { getPostBySlug } from '../lib/api';

export async function getStaticProps(context) {
    const { slug } = context.params;
    let post;
    try {
        post = await getPostBySlug(slug);
    } catch (error) {
        return {
            statusCode: 500,
            props: {
                errorMessage: 'Failed to fetch post data'
            }
        };
    }
    return {
        props: {
            post
        },
        revalidate: 60
    };
}

const BlogPostPage = ({ post, errorMessage }) => {
    if (errorMessage) {
        return (
            <div>
                <p>{errorMessage}</p>
            </div>
        );
    }
    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.date}</p>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
    );
};

export default BlogPostPage;
  1. 客户端路由导航错误 在客户端进行路由导航时，也可能会遇到错误，例如网络不稳定导致页面无法加载。我们可以使用 next/router 的 events 来监听路由导航事件，并处理错误。例如：
import { useRouter } from 'next/router';
import { useEffect } from'react';

const MyPage = () => {
    const router = useRouter();
    useEffect(() => {
        const handleRouteError = (err) => {
            console.error('Route error:', err);
            // 显示错误提示信息
        };
        router.events.on('routeChangeError', handleRouteError);
        return () => {
            router.events.off('routeChangeError', handleRouteError);
        };
    }, [router]);

    return (
        <div>
            {/* 页面内容 */}
        </div>
    );
};

export default MyPage;