React'ın yerleşik Context API'si durum paylaşımı için mükemmeldir. Next.js'nin en son sürümüyle nasıl kullanacağınızı öğrenin.

Next.js, durum yönetimine yönelik çeşitli yaklaşımlar sunar. Bu yöntemlerden bazıları yeni kütüphanelerin kurulmasını gerektirse de React'ın Context API'si yerleşiktir, dolayısıyla harici bağımlılıkları azaltmanın harika bir yoludur.

React Context ile verileri bileşen ağacınızın farklı bölümlerinden sorunsuz bir şekilde geçirebilir ve pervane delme zahmetini ortadan kaldırabilirsiniz. Bu, özellikle mevcut kullanıcının oturum açma durumu veya tercih ettiği tema gibi genel durumu yönetmek için kullanışlıdır.

React Context API'yi Anlamak

Koda dalmadan önce şunu belirtmek önemlidir: React Context API'nin ne olduğunu anlayın ve hangi sorunu çözüyor?

Prop'lar, bileşenler arasında veri paylaşımı için etkili bir yöntem sağlar. Verileri bir ana bileşenden onun alt bileşenlerine aktarmanıza olanak tanır.

Bu yaklaşım faydalıdır çünkü hangi bileşenlerin belirli verileri kullandığını ve bu verilerin bileşen ağacında nasıl aktığını açıkça gösterir.

instagram viewer

Ancak, aynı donanımları tüketmesi gereken derinlemesine iç içe geçmiş bileşenlere sahip olduğunuzda sorunlar ortaya çıkar. Bu durum karmaşıklıklara neden olabilir ve muhtemelen bakımı daha zor olan karmaşık kodlarla sonuçlanabilir. Bu sorunlar, diğerlerinin yanı sıra, pervane delmenin dezavantajları.

React Context, bileşenler genelinde küresel olarak erişilebilir olması gereken verileri oluşturmak ve kullanmak için merkezi bir yöntem sağlayarak bu zorluğu çözer.

Bu verileri tutacak bir bağlam oluşturarak bileşenlerin bu verilere erişmesine olanak tanır. Bu yaklaşım, kod tabanınızı iyi organize edilmesini sağlayacak şekilde yapılandırmanıza yardımcı olur.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo.

Next.js'de Durum Yönetimine Başlarken 13 React Context API'yi Kullanma

Next.js Sunucu Bileşenleri, her iki dünyanın da en iyisini yapan uygulamalar oluşturmanıza olanak tanır: istemci tarafı uygulamaların etkileşimi ve sunucu oluşturmanın performans avantajları.

Next.js 13, Sunucu Bileşenlerini uygular. uygulama varsayılan olarak artık kararlı olan dizin. Ancak tüm bileşenler sunucu tarafından işlendiğinden, istemci tarafı kitaplıkları veya React Context gibi API'leri entegre ederken sorunlarla karşılaşabilirsiniz.

Bunu önlemek için harika bir geçici çözüm istemciyi kullan istemci tarafı kodunu çalıştıracak dosyalar üzerinde ayarlayabileceğiniz bayrak.

Başlamak için terminalinizde şu komutu çalıştırarak yerel olarak bir Next.js 13 projesi oluşturun:

npx create-next-app@latest next-context-api

Projeyi oluşturduktan sonra dizinine gidin:

cd next-context-api

Ardından geliştirme sunucusunu başlatın:

npm run dev

Temel bir Next.js projesi oluşturduktan sonra durum yönetimi için React Context API'yi kullanan temel bir yapılacaklar uygulaması oluşturabilirsiniz.

Bağlam Sağlayıcıyı Oluşturun

Bağlam sağlayıcı dosyası, bileşenlerin erişmesi gereken genel durumu tanımladığınız ve yönettiğiniz merkezi bir merkez görevi görür.

Yeni bir dosya oluşturun, src/context/Todo.context.jsve aşağıdaki kodla doldurun.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Bu React Context kurulumu bir Yapılacak Bağlam başlangıçta uygulama için boş bir yapılacaklar listesinin durumunu tutar.

Başlangıç ​​durumunu oluşturmanın yanı sıra, bu bağlam konfigürasyonu bir redüktör Çeşitli eylem türlerini tanımlayan işlev. Bu eylem türleri, tetiklenen eylemlere bağlı olarak bağlamın durumunu değiştirecektir. Bu durumda eylemler, yapılacak işlerin eklenmesini, silinmesini ve düzenlenmesini içerir.

TodoContextProvider bileşen şunları sağlar: Yapılacak Bağlam uygulamadaki diğer bileşenlere. Bu bileşen iki destek alır: bağlamın başlangıç ​​durumu olan değer desteği ve redüktör işlevi olan redüktör desteği.

Bir bileşen TodoContext'i kullandığında bağlamın durumuna erişebilir ve durumu güncellemek için eylemler gönderebilir.

Bağlam Sağlayıcıyı Next.js Uygulamasına Ekleme

Artık bağlam sağlayıcının Next.js uygulamanızın kökünde görüntülendiğinden ve tüm istemci bileşenlerinin ona erişebildiğinden emin olmak için bağlamı uygulamanın kök düzeni bileşenine eklemeniz gerekir.

Bunu yapmak için açın src/app/layout.js HTML şablonundaki alt düğümü aşağıdaki gibi içerik sağlayıcıyla dosyalayın ve sarın:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Yapılacaklar Bileşeni Oluşturma

Yeni bir dosya oluşturun, kaynak/bileşenler/Todo.jsve içine aşağıdaki kodu ekleyin.

Aşağıdaki içe aktarmaları yaparak başlayın. Aşağıdakileri eklediğinizden emin olun: istemciyi kullan Bu bileşeni istemci tarafı bileşeni olarak işaretlemek için işaretleyin.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Daha sonra, tarayıcıda işlenecek JSX öğeleri de dahil olmak üzere işlevsel bileşeni tanımlayın.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

Bu işlevsel bileşen, ilgili düğmelerin yanı sıra yapılacak işlerin eklenmesi, düzenlenmesi ve silinmesi için giriş alanları içerir. Kullanır React'ın koşullu oluşturması düzenleme indeksi değerine göre düzenleme ve silme düğmelerini göstermek için.

Son olarak, her eylem türü için gerekli durum değişkenlerini ve gerekli işleyici işlevlerini tanımlayın. Fonksiyon bileşeninin içine aşağıdaki kodu ekleyin.

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

Bu işleyici işlevleri, bağlamın durumu dahilinde kullanıcının yapılacak işlerinin eklenmesi, silinmesi ve düzenlenmesinden sorumludur.

Kullanıcı bir yapılacak işi eklediğinde, sildiğinde veya düzenlediğinde, durumu uygun şekilde güncellemek için bağlamın azaltıcısına uygun eylemlerin gönderilmesini sağlar.

Yapılacaklar Bileşenini Oluşturma

Son olarak Yapılacaklar bileşenini sayfa bileşenine aktarın.

Bunu yapmak için src/app dizinindeki page.js dosyasını açın, ortak metin Next.js kodunu silin ve aşağıdaki kodu ekleyin:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Harika! Bu noktada To-do Next.js uygulamasında React Context'i kullanarak durumu yönetebilmelisiniz.

React Context API'yi Diğer Durum Yönetimi Teknolojileriyle Kullanma

React Context API, durum yönetimi için harika bir çözümdür. Bununla birlikte Redux gibi diğer durum yönetimi kütüphaneleriyle birlikte kullanmak mümkündür. Bu hibrit yaklaşım, uygulamanızın önemli rolleri yerine getiren farklı bölümleri için en iyi aracı kullanmanızı sağlar.

Bunu yaparak, verimli ve sürdürülebilir uygulamalar oluşturmak için farklı durum yönetimi çözümlerinin avantajlarından yararlanabilirsiniz.