面试题：Next.js动态路由与布局在复杂场景下的设计与优化

1. Next.js 动态路由配置

创建动态路由页面：在 pages/user 目录下创建 [username].js 文件。在这个文件中，使用 getStaticProps 或 getServerSideProps 来获取用户数据。例如：

import React from'react';
import { GetServerSideProps } from 'next';

const UserProfile = ({ userData }) => {
  return (
    <div>
      <h1>{userData.name}</h1>
      {/* 其他用户信息展示 */}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { username } = context.query;
  // 从数据库或 API 获取用户数据
  const userData = await fetch(`https://api.example.com/user/${username}`).then(res => res.json());
  return {
    props: {
      userData
    }
  };
};

export default UserProfile;

动态路由参数传递：通过 context.query 在 getStaticProps 或 getServerSideProps 中获取动态路由参数 username，并据此获取相应的用户数据。

2. 语言切换

语言检测与存储：可以通过 next-i18next 库来实现多语言支持。首先安装 next-i18next：

npm install next-i18next

在项目根目录创建 i18n.js 文件：

import i18n from 'i18next';
import { initReactI18next } from'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(Backend)
 .use(LanguageDetector)
 .use(initReactI18next)
 .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

语言切换逻辑：在页面中创建语言切换按钮，通过 i18n.changeLanguage 方法切换语言。例如：

import React from'react';
import i18n from '../i18n';

const LanguageSwitcher = () => {
  const handleLanguageChange = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange('en')}>English</button>
      <button onClick={() => handleLanguageChange('zh')}>中文</button>
    </div>
  );
};

export default LanguageSwitcher;

3. 用户角色权限控制

角色检测与存储：用户登录时，将用户角色信息存储在 localStorage 或 cookie 中。在服务器端，可以通过解析 cookie 或 authorization 头来获取用户角色。
基于角色的布局控制：在 getServerSideProps 中根据用户角色获取不同的布局数据。例如：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { username } = context.query;
  const userRole = context.req.cookies.userRole; // 假设从 cookie 获取角色
  let layoutData;
  if (userRole === 'admin') {
    layoutData = await fetch(`https://api.example.com/admin-layout/${username}`).then(res => res.json());
  } else {
    layoutData = await fetch(`https://api.example.com/user-layout/${username}`).then(res => res.json());
  }
  return {
    props: {
      layoutData
    }
  };
};

组件渲染控制：在页面组件中根据 layoutData 渲染不同的布局。

4. SSR 数据获取

使用 getServerSideProps：如上述动态路由和用户角色权限控制部分示例，在 getServerSideProps 中进行数据获取。它会在每次请求时在服务器端运行，确保数据的实时性。
缓存优化：对于不经常变化的数据，可以使用 getStaticProps 并结合 revalidate 参数来实现增量静态再生。例如：

export const getStaticProps: GetStaticProps = async (context) => {
  const { username } = context.query;
  const userData = await fetch(`https://api.example.com/user/${username}`).then(res => res.json());
  return {
    props: {
      userData
    },
    revalidate: 60 // 每 60 秒重新验证数据
  };
};

5. 优化页面加载性能

代码拆分： Next.js 自动进行代码拆分，只加载当前页面所需的代码。可以进一步使用动态导入来懒加载非关键组件。例如：

const MyComponent = React.lazy(() => import('./MyComponent'));

const MyPage = () => {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </React.Suspense>
    </div>
  );
};

图片优化：使用 Next.js 的 next/image 组件，它会自动优化图片，包括根据设备屏幕大小选择合适的图片尺寸、进行图片格式转换等。例如：

import Image from 'next/image';

const MyPage = () => {
  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="example"
        width={300}
        height={200}
      />
    </div>
  );
};

CDN 使用：配置 Next.js 使用 CDN 来加速静态资源的加载。在 next.config.js 中添加：

module.exports = {
  assetPrefix: 'https://your-cdn-url.com'
};

可能遇到的问题及解决方案

SEO 爬虫问题：
- 问题：某些 SEO 爬虫可能无法正确处理 JavaScript 渲染的内容。
- 解决方案：确保 SSR 正确设置，所有关键内容在服务器端渲染并包含在初始 HTML 中。可以使用 next-seo 库来优化 SEO 元数据。
性能问题在高并发时：
- 问题：在高并发情况下，getServerSideProps 可能导致服务器负载过高。
- 解决方案：对频繁请求且不常变化的数据使用 getStaticProps 结合 revalidate，并考虑使用缓存机制，如 Redis 来缓存 API 响应。
语言切换闪烁：
- 问题：语言切换时可能出现短暂的闪烁或布局跳动。
- 解决方案：使用 CSS 过渡和动画来平滑语言切换过程，并且在切换语言前预先加载新语言的资源。
用户角色权限更新不及时：
- 问题：用户角色权限更新后，页面可能没有及时反映变化。
- 解决方案：在关键操作（如用户角色更新）后，通过刷新页面或使用 WebSocket 实时通知客户端更新权限信息。

面试题：Next.js动态路由与布局在复杂场景下的设计与优化

知识考点

面试题答案

1. Next.js 动态路由配置

2. 语言切换

3. 用户角色权限控制

4. SSR 数据获取

5. 优化页面加载性能

可能遇到的问题及解决方案