👭 Создаём 2 сайта на Next.js по цене одного, взламывая светлый/тёмный режим, для Gato GraphQL и Gato Plugins

Недавно команда Gato GraphQL запустила Gato Plugins — дочерний сайт Gato GraphQL.

Вы заметите, что оба сайта одинаковые! Единственное отличие между ними — цветовая схема: Gato GraphQL использует тёмную тему, а Gato Plugins — светлую.

Раздел блога на обоих сайтах абсолютно одинаков:

Раздел документации тоже одинаковый:

Иногда разделы отличаются, однако базовая основа одна и та же.

Например, расширения Gato GraphQL и плагины Gato Plugins используют одинаковый макет:

(Кстати, логотипы тоже почти одинаковые! 😜)

Логотип на gatographql.com

Логотип на gatoplugins.com

Да, эта статья тоже есть на обоих сайтах! 😂

Читайте на gatographql.com: Building 2 Nextjs websites at the price of 1, by hacking the dark/light mode.

Однако между статьями на двух сайтах ровно 7 отличий. Сможете найти все? Если да, я подарю вам купон со скидкой на Gato GraphQL 🙏

Почему мы использовали светлый/тёмный режим для создания 2 сайтов

Причин несколько:

У меня нет времени и сил поддерживать две отдельные кодовые базы. Мне нужно держать всё простым.

Каждый час, потраченный на сайт, — это час, не потраченный на мои продукты.

Я хочу, чтобы они выглядели похоже, и пользователи воспринимали их как часть одного семейства.

Я не дизайнер. Достигнув этого внешнего вида и стиля, я был доволен и не хотел начинать с нуля.

Иными словами: потому что это дёшево и просто. Это сэкономило мне уйму времени и сил, которые я смог вложить в собственный продукт.

Как недостаток: 2 сайта не могут поддерживать переключатель светлого/тёмного режима, поэтому их стиль фиксирован, — но с этим я готов мириться.

Что ж! Давайте засучим рукава и разберёмся, как это было сделано.

Стек: приложение основано на Next.js и использует Tailwind CSS для стилизации.

Оно создано на основе нескольких шаблонов от Cruip, адаптированных под наши нужды. (Эти шаблоны великолепны!)

Контент управляется через Contentlayer.

Вынесите общий код в общий пакет и разместите всё в монорепозитории

Поскольку кодовая база обоих сайтов одинакова, логично разместить их вместе в монорепозитории.

Изначально мой репозиторий содержал один проект:

gatographql.com

Он был реструктурирован следующим образом:

apps/gatographql.com: сайт Gato GraphQL
apps/gatoplugins.com: сайт Gato Plugins
packages/shared/gatoapp: общий код для обоих сайтов

Вот как выглядит моё рабочее пространство в VSCode:

Я не использую ничего сложного для монорепозитория — простые workspaces отлично справляются.

Мой package.json в корне монорепозитория теперь выглядит так:

{
  "name": "gatowebsites",
  "version": "2.0.0",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/shared/*"
  ]
}

Кроме того, я добавил скрипты в package.json для запуска/сборки/деплоя обоих проектов (в том числе деплоя на Netlify, где оба размещены):

{
  "scripts": {
    "dev-gatographql": "npm run dev --workspace=apps/gatographql",
    "build-gatographql": "npm run build --workspace=apps/gatographql",
    "deploy-gatographql": "npm run deploy-staging-gatographql",
    "deploy-dev-gatographql": "netlify dev --filter gatographql",
    "deploy-staging-gatographql": "netlify deploy --build --context deploy-preview --filter gatographql",
    "deploy-prod-gatographql": "netlify deploy --build --prod --context production --filter gatographql",
 
    "dev-gatoplugins": "npm run dev --workspace=apps/gatoplugins",
    "build-gatoplugins": "npm run build --workspace=apps/gatoplugins",
    "deploy-gatoplugins": "npm run deploy-staging-gatoplugins",
    "deploy-dev-gatoplugins": "netlify dev --filter gatoplugins",
    "deploy-staging-gatoplugins": "netlify deploy --build --context deploy-preview --filter gatoplugins",
    "deploy-prod-gatoplugins": "netlify deploy --build --prod --context production --filter gatoplugins"
  }
}

Преобразуйте компоненты для приёма пропсов с пользовательскими данными

По возможности мы переносим код из каждого сайта в общий пакет, а затем настраиваем поведение через пропсы.

Например, общий пакет gatoapp содержит компонент BlogSection (для отображения страницы /blog на обоих сайтах):

import PopularPosts from 'gatoapp/components/blog/popular-posts'
import PageHeader from 'gatoapp/components/page-header'
import { BlogPostProps } from 'gatoapp/types/list-types'
import BlogSectionPostList from './blog-section-post-list'
import { useEffect, useState, Suspense } from "react";
 
export default function BlogSection({
  blogPosts,
  title = "Our Blog",
  description,
  campaignBanner,
}: {
  blogPosts: BlogPostProps[],
  title?: string,
  description: string,
  campaignBanner?: React.ReactNode
}) {
  const sidebar = (
    <aside className="hidden sm:block relative mt-12 md:mt-0 md:w-64 md:ml-12 lg:ml-20 md:shrink-0">
      <PopularPosts
        blogPosts={blogPosts}
      />
    </aside>
  )
 
  return (
    <div className="max-w-6xl mx-auto px-4 sm:px-6">
      <div className="pt-32 pb-12 md:pt-40 md:pb-20">
 
        {campaignBanner}
 
        {/* Page header */}
        <PageHeader
          title={title}
          description={description}
        />
 
        {/* Main content */}
        <BlogSectionPostList
          blogPosts={blogPosts}
          sidebar={sidebar}
        />
 
      </div>
    </div>
  )
}

Весь контент одинаков, за исключением:

Заголовка страницы (название/описание)
Записей блога
Баннера кампании

Поскольку два сайта могут проводить собственные кампании независимо друг от друга, передача campaignBanner как React.ReactNode не ограничивает настройку кампаний.

Например, пока я публикую эту статью, я провожу кампанию в Gato GraphQL, но не в Gato Plugins:

Баннер кампании на gatographql.com

Для внедрения записей блога требуется немного больше логики.

Внедрение записей блога

Данные для записей блога передаются в BlogSection через проп blogPosts.

Поскольку я использую Contentlayer, каждый сайт будет иметь файл contentlayer.config.js в корне, определяющий типы на сайте.

Этот файл конфигурации нельзя перенести в общий пакет gatoapp. Поэтому мы создаём экспортный модуль для предоставления конфигурации общих типов, а затем импортируем их в contentlayer.config.js каждого сайта, сохраняя логику DRY.

gatoapp имеет экспортный модуль contentlayer.config.js, предоставляющий общий тип BlogPost:

import { defineDocumentType } from 'contentlayer2/source-files'
 
const BlogPost = defineDocumentType(() => ({
  name: 'BlogPost',
  filePathPattern: `blog/**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      required: true
    },
    publishedAt: {
      type: 'date',
      required: true
    },
    description: {
      type: 'string',
      required: true,
    },
    image: {
      type: 'string',
    },
  },
  computedFields: {
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(new RegExp('^blog/?'), ''),
    },
    urlPath: {
      type: 'string',
      resolve: (doc) => `/blog/${doc._raw.flattenedPath.replace(new RegExp('^blog/?'), '')}`,
    },
  },
}))
 
module.exports = {
  types: {
    BlogPost: BlogPost,
  },
}

Файл contentlayer.config.js как в apps/gatographql.com, так и в apps/gatoplugins.com может затем импортировать этот тип:

import { makeSource } from 'contentlayer2/source-files'
import ContentLayerConfig from '../../packages/shared/gatoapp/contentlayer.config.js'
 
const BlogPost = ContentLayerConfig.types.BlogPost
 
export default makeSource({
  documentTypes: [BlogPost],
})

Обычно для ссылки на тип BlogPost в коде мы импортировали бы его так:

import { BlogPost } from '@/.contentlayer/generated'

Однако тип BlogPost находится под сайтом, а не под общим пакетом, поэтому общий код не может ссылаться на этот тип напрямую.

Мы решаем это с помощью хака: копируем определение этого типа из скомпилированного файла Contentlayer (из apps/gatographql/.contentlayer/generated/types.d.ts) и вставляем его в новый файл types.tsx в общем пакете:

import type { MDX, IsoDateTimeString } from 'contentlayer2/core'
 
export type BlogPost = {
  // _id: string // not needed
  // _raw: Local.RawDocumentData // not needed
  type: 'BlogPost'
  title: string
  publishedAt: IsoDateTimeString
  description: string
  image?: string | undefined
  body: MDX
  slug: string,
  urlPath: string,
}

Затем мы ссылаемся на этот общий тип в общем коде:

import { BlogPost } from 'gatoapp/types'

Поскольку свойства типов BlogPost на сайте и в общем пакете одинаковы, мы можем передавать первый в компонент, ожидающий второй.

Создайте контекст для внедрения глобальных пропсов

Компоненты навигационного меню будут отображаться в общем коде, но предоставляться кодом сайта, поскольку у каждого сайта будут свои меню.

Меню появляются на всех страницах, и мы не хотим передавать их через пропсы снова и снова. Поэтому мы используем контекст React, позволяющий нам внедрить компоненты навигационного меню лишь один раз.

Мы создаём контекст AppComponent в общем пакете:

'use client'
 
import React from 'react'
import { createContext, useContext } from 'react'
import { StaticImageData } from 'next/image'
 
type ContextProps = {
  header: {
    menu: React.ReactNode,
    mobileMenu: React.ReactNode,
  },
}
 
const AppComponentContext = createContext<ContextProps>({
  header: {
    menu: <div></div>,
    mobileMenu: <div></div>,
  },
})
 
export interface AppComponentProviderInterface extends ContextProps {
  children: React.ReactNode,
}
 
export default function AppComponentProvider({
  children,
  header,
}: AppComponentProviderInterface) {  
  return (
    <AppComponentContext.Provider value={{ header }}>
      {children}
    </AppComponentContext.Provider>
  )
}
 
export const useAppComponentProvider = () => useContext(AppComponentContext)

Мы ссылаемся на него в нашем общем пакете:

'use client'
 
import Logo from './logo'
import HeaderMobile from './header-mobile'
import { useAppComponentProvider } from 'gatoapp/app/appcomponent-provider'
 
export default function Header() {
  const AppComponent = useAppComponentProvider()
  return (
    <header className="fixed w-full z-50">
      <div className={`absolute inset-0 bg-opacity-70 backdrop-blur -z-10 bg-white border-slate-200 border-b dark:border-b-0 dark:bg-transparent dark:border-slate-800`} aria-hidden="true"/>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="flex items-center justify-between h-16">
 
          {/* Site branding */}
          <div className="flex-1">
            <Logo />
          </div>
 
          <nav className="hidden md:flex md:grow">
            {/* Desktop menu links */}
            {AppComponent.header.menu}
          </nav>
 
          <HeaderMobile />
 
        </div>
      </div>
    </header>
  )
}

И внедряем его через код сайта в apps/gatographql/app/(default)/layout.tsx:

import AppComponentProvider from 'gatoapp/app/appcomponent-provider'
import HeaderMenu from '@/components/menu/header-menu'
import HeaderMobileMenu from '@/components/menu/header-mobile-menu'
import DefaultLayout from 'gatoapp/app/(default)/layout'
 
export default function AppDefaultLayout({
  children,
}: {
  children: React.ReactNode
}) {  
  return (
    <AppComponentProvider
      header={{
        menu: <HeaderMenu />,
        mobileMenu: <HeaderMobileMenu />,
      }}
    >
      <DefaultLayout>
        {children}
      </DefaultLayout>
    </AppComponentProvider>
  )
}

Наконец, сайт реализует собственный компонент HeaderMenu:

import Link from 'next/link'
import Dropdown from 'gatoapp/components/utils/dropdown'
 
export default function HeaderMenu() {
  return (
    <ul className="flex grow justify-center flex-wrap items-center">
      <li>
        <Link href="/pricing">Pricing</Link>
      </li>
      <li>
        <Link href='/extensions'>Extensions</Link>
      </li>      
      <Dropdown title="Product">
        <li>
          <Link href='/features'>Features</Link>
        </li>
        <li>
          <Link href='/highlights'>Highlights</Link>
        </li>
        <li>
          <Link href='/demos'>Demos</Link>
        </li>
        <li>
          <Link href='/comparisons'>Comparisons</Link>
        </li>
        <li>
          <Link href='/roadmap'>Roadmap</Link>
        </li>
      </Dropdown>
    </ul>
  )
}

Стили для светлого и тёмного режимов

В Tailwind мы добавляем префикс dark: к классу, чтобы использовать его при включённом тёмном режиме.

Поэтому код нашего общего пакета должен содержать стили для обоих вариантов — светлого и тёмного.

Например, компонент PageHeader отображает описание с разными цветами для светлого режима (text-gray-600) и тёмного режима (dark:text-slate-400):

export default function PageHeader({
  title,
  description,
  children,
}: {
  title: string,
  description?: string,
  children?: React.ReactNode,
}) {
  return (
    <div className="max-w-3xl mx-auto text-center">
      <h1 className="h1 pb-4">{title}</h1>
      {description && (
        <div className="max-w-3xl mx-auto">
          <p className="text-gray-600 dark:text-slate-400">{description}</p>
        </div>
      )}
      {children}
    </div>
  )
}

Установите светлый или тёмный режим на сайте

gatographql.com использует тёмный режим. Он определяется добавлением класса dark к <body> в файле apps/gatographql/app/layout.tsx (плюс классы для стилизации: bg-slate-900 text-slate-100):

import { Inter } from 'next/font/google'
import RootLayoutHeader from 'gatoapp/app/layout-header'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <RootLayoutHeader />
      <body className={`${inter.variable} dark bg-slate-900 text-slate-100`}>
        {children}
      </body>
    </html>
  )
}

gatoplugins.com использует светлый режим. Это режим по умолчанию, поэтому нет необходимости добавлять какой-либо специальный класс к <body> (только классы для стилизации: bg-white text-slate-700):

import { Inter } from 'next/font/google'
import RootLayoutHeader from 'gatoapp/app/layout-header'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap'
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <RootLayoutHeader />
      <body className={`${inter.variable} bg-white text-slate-700`}>
        {children}
      </body>
    </html>
  )
}

Вот и всё

Теперь у меня есть 2 сайта, которые я получил по цене одного. И я очень доволен этим.

А теперь найдите 7 отличий и получите свой приз! 😅

👭 Создаём 2 сайта на Next.js по цене одного, взламывая светлый/тёмный режим

Команда состоит из одного человека (меня, Лео)

Я хочу сосредоточиться на своих продуктах (Gato GraphQL/Gato Plugins)

Я хочу, чтобы оба сайта демонстрировали свою связь

Первый сайт, который я создал (gatographql.com), уже выглядел хорошо

Узнайте, что будет дальше