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