面试题：Next.js跨页面布局与样式动态切换的高级实现

技术选型

Next.js: 作为应用框架，利用其路由系统和页面级别的构建能力。
CSS - in - JS: 如 styled - components 或 emotion，便于动态生成和管理样式，有效避免样式冲突。
React Context: 用于在不同组件间共享用户角色和设备类型等信息，实现全局状态管理。

核心代码逻辑

创建上下文

import React from'react';

// 创建用户角色上下文
const UserRoleContext = React.createContext();

// 创建设备类型上下文
const DeviceTypeContext = React.createContext();

export { UserRoleContext, DeviceTypeContext };

提供上下文数据

import React from'react';
import { UserRoleContext, DeviceTypeContext } from './context';

function App({ Component, pageProps }) {
    const userRole = 'admin';// 假设从 API 获取或本地存储读取
    const deviceType = typeof window!== 'undefined'? (window.innerWidth > 768? 'desktop' :'mobile') : 'desktop';

    return (
        <UserRoleContext.Provider value={userRole}>
            <DeviceTypeContext.Provider value={deviceType}>
                <Component {...pageProps} />
            </DeviceTypeContext.Provider>
        </UserRoleContext.Provider>
    );
}

export default App;

使用上下文并动态切换布局和样式

import React from'react';
import { UserRoleContext, DeviceTypeContext } from './context';
import styled from'styled - components';

// 定义不同布局的样式
const DesktopLayout = styled.div`
    background - color: lightblue;
    padding: 20px;
`;

const MobileLayout = styled.div`
    background - color: lightgreen;
    padding: 10px;
`;

const AdminLayout = styled.div`
    background - color: orange;
    padding: 30px;
`;

const UserLayout = styled.div`
    background - color: lightgray;
    padding: 20px;
`;

function Page() {
    const userRole = React.useContext(UserRoleContext);
    const deviceType = React.useContext(DeviceTypeContext);

    let layoutComponent;

    if (userRole === 'admin') {
        layoutComponent = deviceType === 'desktop'? <AdminLayout>Admin Desktop Layout</AdminLayout> : <AdminLayout>Admin Mobile Layout</AdminLayout>;
    } else {
        layoutComponent = deviceType === 'desktop'? <UserLayout>User Desktop Layout</UserLayout> : <UserLayout>User Mobile Layout</UserLayout>;
    }

    return (
        <div>
            {layoutComponent}
        </div>
    );
}

export default Page;

样式加载与卸载
- 使用 CSS - in - JS 库（如 styled - components）时，样式会在组件渲染时自动加载，在组件卸载时自动卸载。例如，当一个组件使用了 styled - components 创建的样式组件，当该组件从 DOM 中移除时，相关的样式也会从文档中移除，从而避免了样式残留和冲突。

通过上述架构设计，利用 Next.js 的特性、React Context 进行状态管理以及 CSS - in - JS 库处理样式，可以有效实现不同页面间根据用户角色或设备类型的动态布局切换，并避免样式冲突。

面试题：Next.js跨页面布局与样式动态切换的高级实现

知识考点

面试题答案

技术选型

核心代码逻辑