رقصنده با کد

در Next.js برای پیاده‌سازی قابلیت‌های مشترک (common functionality) بین صفحات یا کامپوننت‌ها، استراتژی‌های مختلفی وجود دارد که می‌توان بسته به نیاز، بهترین روش را انتخاب کرد:

1️⃣ HOC (Higher-Order Components)

برای اعمال یک منطق مشترک به چندین کامپوننت (مثلاً احراز هویت، theme، لاگ کردن، ردیابی و…) می‌توان از HOC استفاده کرد.


// withAuth.tsx
const withAuth = (Component) => {
  return function AuthComponent(props) {
    const isLoggedIn = useSessionCheck()
    if (!isLoggedIn) return <Login />
    return <Component {...props} />
  }
}

2️⃣ Custom Hooks

برای منطق‌های قابل استفاده مجدد مثل fetch داده، فرم‌ها، انیمیشن، ریسپانسیو بودن، و… می‌توان از هوک‌های سفارشی استفاده کرد.


// useFetchData.ts
export const useFetchData = (url: string) => {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData)
  }, [url])
  return data
}

3️⃣ Layout های مشترک

برای اشتراک یک ساختار پایه مثل هدر، سایدبار، فوتر، در تمام صفحات.

- در Next.js 13 به بعد (app router):


// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <Sidebar />
        <main>{children}</main>
      </body>
    </html>
  )
}

- در pages router (نسخه‌های قبل):


// _app.tsx
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

4️⃣ Middleware (برای درخواست‌های مشترک سمت سرور)

در نسخه‌های جدید Next، از Middleware برای انجام بررسی‌های مشترک قبل از رسیدن درخواست به صفحه استفاده می‌شود.

مثال: redirect کاربران مهمان، یا بررسی locale:


// middleware.ts
export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')
  if (!token) {
    return NextResponse.redirect('/login')
  }
}

5️⃣ API Handler های مشترک


 js
// lib/api.ts
export const fetchUser = async () => {
  return await fetch('/api/user').then(res => res.json())
}

6️⃣ Context API / Zustand / Redux

برای اشتراک state بین صفحات و کامپوننت‌ها. مثلاً برای مدیریت session، theme، زبان و…


// app/provider.tsx
export const GlobalContext = createContext()

export function GlobalProvider({ children }) {
  const [user, setUser] = useState(null)
  return (
    <GlobalContext.Provider value={{ user, setUser }}>
      {children}
    </GlobalContext.Provider>
  )
}

7️⃣ Server Actions (در App Router)

در Next 13+ می‌توان logicهای server-side قابل اشتراک را به صورت تابع در فایل‌ها نوشت.


// app/actions/login.ts
export async function login(formData: FormData) {
  const res = await fetch('/api/login', { method: 'POST', body: formData })
  return res.json()
}

8️⃣ Utility Functions / Helpers

توابع کمکی مثل formatDate، validateEmail، calculateTotal و… را در پوشه‌ی lib/ یا utils/ تعریف کرده و در کل پروژه استفاده کنید.


// utils/format.ts
export const formatDate = (date: Date) =>
  new Intl.DateTimeFormat('fa-IR').format(date)

9️⃣ Shared Components

کامپوننت‌هایی مثل دکمه، مودال، فرم، toast notification و… را در یک پوشه components/shared/ نگه دارید.

🔟 Monorepo / Shared Packages (در پروژه‌های بزرگ یا microfrontend)

با استفاده از Turborepo یا Nx می‌توانید ماژول‌های مشترک بین چند پروژه را به شکل بسته مجزا نگه دارید.

#nextjs #commonfunctionality

کانال رقصنده با کد
@danceswithcode

476 viewsAli KhodaeiDoost, edited 07:23

About

Blog

Apps

Platform