Как реализовать несколько шаблонов в Next.js для различных стилей страниц и компонентов?

На чтение 4 мин Опубликовано 27.09.2024

Содержание

Вопрос или проблема
Ответ или решение
1. Структура проекта
2. Создание шаблонов
3. Использование шаблонов на страницах
4. Контекст для управления шаблонами
Заключение

Вопрос или проблема

Я хочу реализовать несколько шаблонов в Next.js, где каждый шаблон имеет свой стиль для страниц и компонентов. Например, у меня есть “дефолтный” шаблон с его собственными стилями и компонентами, а также “профессиональный” шаблон, где те же страницы и компоненты существуют, но с разными стилями. В будущем я планирую создать больше шаблонов, поэтому мне нужно масштабируемое решение. Есть ли родной способ в Next.js для обработки нескольких шаблонов для разных стилей? Если нет, то какой будет лучший подход для достижения этого?

Ответ или решение

Для реализации нескольких шаблонов в Next.js, где каждый шаблон имеет свои стили для страниц и компонентов, вы можете воспользоваться следующими подходами, которые обеспечат масштабируемость и гибкость в вашем проекте.

1. Структура проекта

Создайте папку, в которой будут храниться ваши шаблоны. Например:

/components
  /templates
    /DefaultTemplate
      - index.tsx
      - styles.module.css
    /ProTemplate
      - index.tsx
      - styles.module.css
/pages
  - index.tsx
  - about.tsx

Каждый шаблон включает в себя свои компоненты и стили.

2. Создание шаблонов

Каждый шаблон можно реализовать как отдельный компонент. Например, DefaultTemplate и ProTemplate могут выглядеть так:

DefaultTemplate/index.tsx:

import React from 'react';
import styles from './styles.module.css';

const DefaultTemplate = ({ children }) => {
  return (
    <div className={styles.defaultContainer}>
      <header>Default Header</header>
      <main>{children}</main>
      <footer>Default Footer</footer>
    </div>
  );
};

export default DefaultTemplate;

ProTemplate/index.tsx:

import React from 'react';
import styles from './styles.module.css';

const ProTemplate = ({ children }) => {
  return (
    <div className={styles.proContainer}>
      <header>Pro Header</header>
      <main>{children}</main>
      <footer>Pro Footer</footer>
    </div>
  );
};

export default ProTemplate;

3. Использование шаблонов на страницах

Теперь вы можете использовать эти шаблоны на страницах, определяя, какой из них применить в зависимости от условий. Например, в файле pages/index.tsx вы можете сделать следующее:

import DefaultTemplate from '../components/templates/DefaultTemplate';
import ProTemplate from '../components/templates/ProTemplate';

const HomePage = ({ useProTemplate }) => {
  const Template = useProTemplate ? ProTemplate : DefaultTemplate;

  return (
    <Template>
      <h1>Добро пожаловать на главную страницу!</h1>
    </Template>
  );
};

// Пример использования, вы можете передать useProTemplate через props или context
export async function getServerSideProps() {
  const useProTemplate = true; // или false в зависимости от логики
  return { props: { useProTemplate } };
}

export default HomePage;

4. Контекст для управления шаблонами

Если у вас много страниц и вы хотите управлять тем, какой шаблон использовать, можно применить Context API. Создайте контекст для шаблонов:

context/TemplateContext.tsx:

import React, { createContext, useContext, useState } from 'react';

const TemplateContext = createContext();

export const TemplateProvider = ({ children }) => {
  const [isProTemplate, setIsProTemplate] = useState(false); // логика выбора

  return (
    <TemplateContext.Provider value={{ isProTemplate, setIsProTemplate }}>
      {children}
    </TemplateContext.Provider>
  );
};

export const useTemplate = () => useContext(TemplateContext);

Вы можете затем использовать этот контекст в вашем основном компоненте или страницах:

import { useTemplate } from '../context/TemplateContext';

const MyApp = ({ Component, pageProps }) => {
  const { isProTemplate } = useTemplate();

  const Template = isProTemplate ? ProTemplate : DefaultTemplate;

  return (
    <Template>
      <Component {...pageProps} />
    </Template>
  );
};

export default MyApp;

Заключение

Таким образом, вы можете эффективно и масштабируемо реализовать многократные шаблоны в Next.js. Используя структуру компонентов и возможность контекста, вы можете динамически рендерить нужный шаблон в зависимости от логики вашего приложения. Это сделает вашу кодовую базу более упорядоченной и управляемой в будущем.