v2.5.2
Giriş yap

Next.js State Yönetimi için React Context Kullanmak

React'de herhangi bir paket vs. kurmadan state yönetimini sağlamak için context i kullanıyoruz. Eğer bunu nextjs projelerinizde de kullanmak isterseniz yapacağınız çok basit bir adım aslında.

Zaten hali hazırda context kullanımını biliyorsanız bunlar sizin için çocuk oyuncağı, bilmiyorsanız ilk iş src/context.js dosyası oluşturma (adını istediğiniz gibi belirleyebilirsiniz, ben genelde src klasörü altında tutuyorum)

// src/context.js

import { createContext, useContext } from 'react';

const AppContext = createContext();

export function Wrapper({ children }) {

  const sharedState = {
      /* 
          burada paylaşacağın
          dataları belirleyebilirsin 
      */
  }

  return (
    <AppContext.Provider value={sharedState}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

Daha sonra pages/_index.js dosyanızı açıp Wrapper ı import edin ve içeride kullanın.

// pages/_index.js

import { Wrapper } from '../src/context';

export default function App({ Component, pageProps }) {
  return (
    <Wrapper>
      <Component {...pageProps} />
    </Wrapper>
  )
}

Artık sharedState altında gönderdiğiniz tüm statelere şöyle erişebilirsiniz.

// pages/ornek.js

import {useAppContext} from '../src/context';

function Ornek() {
    const {ornekState, ornekState2} = useAppContext()
    return {
        <h1>Örnek sayfa</h1>
    }
}

export default Ornek
tayfunerbilen
1047 gün önce yazdı - 1988 kez görüntülendi.
Önceki Nextjs'de styled-jsx'i SASS ile Kullanmak Sonraki Svelte / Svelte For Döngüsü