🎊 chore: upgrade nextra v3

eslint.config.js

@@ -39,6 +39,7 @@ export default antfu({
     'react-hooks/exhaustive-deps': WARN,
     'react/no-useless-fragment': OFF,
     'react/no-array-index-key': OFF,
+    'react-hooks/rules-of-hooks': OFF,
 
     'unused-imports/no-unused-vars': WARN,
     curly: [ERROR, 'multi-line', 'consistent'],

next.config.mjs

@@ -3,11 +3,28 @@ import createWithNextra from 'nextra'
 const withNextra = createWithNextra({
   theme: 'nextra-theme-docs',
   themeConfig: './src/theme.config.tsx',
+  defaultShowCopyCode: true,
 })
 
 
+/**
+ * @type {import("next").NextConfig}
+ */
 export default withNextra({
   images: {
     unoptimized: true,
   },
+  reactStrictMode: true,
+  distDir: './.next',
+  i18n: {
+    locales: ['zh', 'en'],
+    defaultLocale: 'zh',
+  },
+  redirects: () => [
+    {
+      source: '/',
+      destination: '/zh',
+      permanent: true,
+    },
+  ],
 })

package.json

@@ -30,8 +30,8 @@
     "framer-motion": "^11.3.28",
     "lucide-react": "^0.428.0",
     "next": "14.2.5",
-    "nextra": "^2.13.4",
-    "nextra-theme-docs": "^2.13.4",
+    "nextra": "^3.0.0-alpha.31",
+    "nextra-theme-docs": "3.0.0-alpha.31",
     "qss": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/HomepageHero/Section.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { cn } from '@/lib/utils'
-import { MotionWrapperFlash } from '@/components/MotionWrapper/Flash'
+import { MotionWrapperFadeIn, MotionWrapperFlash } from '@/components/MotionWrapper'
 
 interface Props {
   title?: string
@@ -17,7 +17,7 @@ export const Section = (props: Props) => {
       className,
     )}
     >
-      <MotionWrapperFlash disabledHover>
+      <MotionWrapperFlash>
         <h2 className={cn(
           'relative',
           'text-center font-semibold',
@@ -30,14 +30,16 @@ export const Section = (props: Props) => {
           <span>{ title }</span>
         </h2>
       </MotionWrapperFlash>
-      {
-        description
-        && (
-          <h2 className="text-sm md:text-base max-w-4xl my-4 mx-auto text-center font-normal text-zinc-600 dark:text-zinc-400">
-            { description }
-          </h2>
-        )
-      }
+      <MotionWrapperFadeIn>
+        {
+          description
+          && (
+            <h2 className="text-sm md:text-base max-w-4xl my-4 mx-auto text-center font-normal text-zinc-600 dark:text-zinc-400">
+              { description }
+            </h2>
+          )
+        }
+      </MotionWrapperFadeIn>
       {children}
     </section>
   )

src/components/HomepageHero/Setup.tsx

@@ -4,11 +4,14 @@ import { FlipWords } from '@/components/ui/flip-words'
 import { Button } from '@/components/ui/button'
 import styles from '@/components/HomepageHero/SetupHero.module.scss'
 import { MotionWrapperFlash } from '@/components/MotionWrapper/Flash'
+import { useLocale } from '@/hooks'
 
 
 interface Props {
 }
 export function SetupHero(props: Props) {
+  const { t, currentLocale } = useLocale()
+
   return (
     <div className={styles.container}>
       <div className={styles.tilesBackground}></div>
@@ -21,11 +24,11 @@ export function SetupHero(props: Props) {
             target="_blank"
             rel="noopener noreferrer"
           >
-            轻量级、开箱即用 🎉
+            {t('badgeTitle')}
           </a>
         </div>
         <h1 className={styles.headline}>
-          <MotionWrapperFlash>
+          <MotionWrapperFlash className="flex items-center">
             <span className="icon-[emojione-v1--lightning-mood]"></span>
           </MotionWrapperFlash>
           {' '}
@@ -88,20 +91,20 @@ export function SetupHero(props: Props) {
             <Button
               asChild
               size="lg"
-              className="group max-sm:w-[100%]"
+              className="font-bold group max-sm:w-[100%]"
             >
               <Link
-                href="/introduction"
+                href={`/${currentLocale}/introduction`}
               >
                 Get Started
-                <span className="w-[20px] pl-[6px] transition-all group-hover:pl-[10px]">→</span>
+                <span className="w-[20px] translate-x-[6px] transition-all group-hover:translate-x-[10px] icon-[mingcute--arrow-right-fill]"></span>
               </Link>
             </Button>
             <Button
               asChild
               size="lg"
               variant="secondary"
-              className="group max-sm:w-[100%]"
+              className="font-bold group max-sm:w-[100%]"
             >
               <Link
                 href="https://github.com/pdsuwwz/nextjs-nextra-starter"

src/components/HomepageHero/SetupHero.module.scss

@@ -42,15 +42,15 @@
   margin: 0 auto;
   position: relative;
   z-index: 2;
-  padding-bottom: 142px;
   padding-left: max(env(safe-area-inset-left), 1.5rem);
   padding-right: max(env(safe-area-inset-right), 1.5rem);
   max-width: 90rem;
   text-align: center;
+  @apply pb-12 md:pb-[142px];
 }
 
 .badgeContainer {
-  margin-top: 4rem;
+  @apply mt-8 md:mt-16;
 }
 
 .badge {
@@ -114,7 +114,7 @@
     background-image: linear-gradient(146deg, #fff, #81878b);
   }
 
-  @apply sm:inline-flex max-sm:flex max-sm:flex-col;
+  @apply flex max-lg:flex max-lg:flex-col items-center justify-center;
 }
 
 .subtitle {

src/components/HomepageHero/index.tsx

@@ -69,11 +69,12 @@ export default function HomepageHero() {
           />
         </a>
       </div> */}
-      <div className="pt-[20px] pb-[100px]">
+      <div className="top-[-55px] mb-[-55px] md:top-[-68px] md:mb-[-68px]"></div>
+      <div className="relative z-[1] pt-[20px] pb-10 md:pb-[100px]">
         <Section
           title="Tech Stack"
         >
-          <div className="flex justify-center w-full max-w-7xl h-[160px]">
+          <div className="flex justify-center w-full max-w-7xl h-[80px] my-[30px]">
             <Marquee
               pauseOnHover
               autoFill

src/components/MotionWrapper/FadeIn.tsx

@@ -0,0 +1,54 @@
+import type { Variants } from 'framer-motion'
+import { motion, useInView } from 'framer-motion'
+import { memo, useRef } from 'react'
+
+interface MotionWrapperFadeInProps {
+  children: React.ReactNode
+  className?: string
+  noVertical?: boolean
+  delay?: number
+  viewTriggerOffset?: boolean
+}
+
+const fadeUpVariants: Variants = {
+  initial: (noVertical: boolean) => ({
+    opacity: 0,
+    y: noVertical ? 0 : 24,
+  }),
+  animate: {
+    opacity: 1,
+    y: 0,
+  },
+}
+
+export const MotionWrapperFadeIn = memo(({
+  children,
+  className,
+  noVertical = false,
+  delay = 0,
+  viewTriggerOffset = false,
+}: MotionWrapperFadeInProps) => {
+  const ref = useRef(null)
+  const inView = useInView(ref, {
+    once: true,
+    margin: viewTriggerOffset ? '-100px' : '0px',
+  })
+
+  return (
+    <motion.div
+      animate={inView ? 'animate' : 'initial'}
+      className={className}
+      initial="initial"
+      ref={ref}
+      transition={{
+        duration: 1,
+        delay,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      variants={fadeUpVariants}
+      custom={noVertical}
+    >
+      {children}
+    </motion.div>
+  )
+})

src/components/MotionWrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './FadeIn'
+export * from './Flash'

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useLocale'

src/hooks/useLocale.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+import { useRouter } from 'nextra/hooks'
+
+import type { AllLocales, I18nLangKeys, LocaleKeys } from '@/i18n'
+import { i18nConfig } from '@/i18n'
+
+
+export const useLocale = () => {
+  const { locale, defaultLocale } = useRouter()
+  const currentLocale = (locale || defaultLocale) as I18nLangKeys
+
+  const t = useCallback(
+    <K extends LocaleKeys>(key: K): AllLocales[K] => {
+      return i18nConfig[currentLocale][key]
+    },
+    [currentLocale],
+  )
+
+  return {
+    currentLocale,
+    t,
+  }
+}

src/i18n/en.ts

@@ -0,0 +1,7 @@
+export default {
+  systemTitle: '🚀 My Nextra Starter',
+  bannerTitle: '👋 Hey there! Welcome to the Next.js Starter.',
+  bannerMore: 'Check it out',
+
+  badgeTitle: 'Lightweight & Easy 🎉',
+}

src/i18n/index.ts

@@ -0,0 +1,15 @@
+import en from './en'
+import zh from './zh'
+
+export const i18nConfig = Object.freeze({
+  en,
+  zh,
+})
+
+export type I18nLangKeys = keyof typeof i18nConfig
+
+// 获取所有语言对象的联合类型
+export type AllLocales = typeof i18nConfig[I18nLangKeys]
+
+// 获取所有可能的键
+export type LocaleKeys = keyof AllLocales

src/i18n/zh.ts

@@ -0,0 +1,7 @@
+export default {
+  systemTitle: '🚀 Nextra 启动模板',
+  bannerTitle: '👋 嘿，欢迎来到 Next.js 起步模板!',
+  bannerMore: '了解详情',
+
+  badgeTitle: '轻量级、开箱即用 🎉',
+}

src/pages/_app.tsx

@@ -0,0 +1,9 @@
+import type { AppProps } from 'next/app'
+import type { ReactElement } from 'react'
+import '@/styles/index.scss'
+
+export default function App({ Component, pageProps }: AppProps): ReactElement {
+  return (
+    <Component {...pageProps} />
+  )
+}

src/pages/en/_meta.ts

@@ -0,0 +1,8 @@
+export default {
+  index: {
+    display: 'hidden',
+    theme: {
+      layout: 'raw',
+    },
+  },
+}

src/pages/en/index.mdx

@@ -0,0 +1,8 @@
+---
+title: "Home Page"
+---
+
+
+import HomepageHero from "@/components/HomepageHero";
+
+<HomepageHero />

src/pages/zh/_meta.ts

@@ -0,0 +1,8 @@
+export default {
+  index: {
+    display: 'hidden',
+    theme: {
+      layout: 'raw',
+    },
+  },
+}

src/pages/zh/index.mdx

@@ -0,0 +1,8 @@
+---
+title: "首页"
+---
+
+
+import HomepageHero from "@/components/HomepageHero";
+
+<HomepageHero />