Son birkaç yılda Sunucu Tarafı Oluşturma (SSR), modern web geliştirmede büyük bir trend haline geldi. React geliştiricileri için en popüler SSR çözümlerinden biri Next.js'dir ve karma sunucu/istemci ortamında çalışırken zorlayıcı olabilecek bazı ortak kullanıcı arayüzü görevleri vardır. Bu derste size Next.js uygulamasında sıfırdan temel bir Modal bileşeninin nasıl oluşturulacağını göstereceğim.
Başlamadan önce
Öncelikle npx veya yarn kullanarak yeni bir Next.js projesi başlatmamız gerekiyor.
npx create-next-app
# or
yarn create next-app
Her modalın temel amacı sayfadaki diğer tüm öğelerin üstünde görünmektir. Bu nedenle onu, kullanıcı arayüzünün geri kalanını barındıran düğümün dışında, ayrı bir DOM düğümüne yerleştirmek iyi bir uygulamadır. Ancak klasik bir React SPA'da uygulama belirli bir DOM düğümü içinde işlenir, peki bunu nasıl yaparız? Bu tür senaryolarda React'ın API'si Portal adı verilen bir özellik sunar . Bileşenlerin, uygulamanın kullandığı kök düğümün dışındaki belirli bir DOM düğümünde oluşturulmasına olanak tanır. index.htmlBir SPA'da bunu başarmak oldukça kolaydır çünkü uygulamanın geri kalanını içeren ana öğeyi değiştirebiliriz . Ancak Next.js uygulaması SPA'dan çok farklı olduğundan elimizde böyle bir dosya yok. Uygulamamızın kök DOM yapısını değiştirmenin yolu _document.jskütüphane tarafından sağlanan dosyayı kullanmaktır. Bununla ilgili daha fazla bilgiyi resmi belgelerde okuyabilirsiniz. Lütfen bu dosyayı sayfalar klasörünün içinde oluşturun ve aşağıdaki içeriği ekleyin:
import Document, { Html, Head, Main, NextScript } from "next/document";
class MainDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
{/*Below we add the modal wrapper*/}
<div id="modal-root"></div>
</body>
</Html>
);
}
}
export default MainDocument;
Temel olarak bileşende varsayılan kodu kullandık ve Modal'ımızın oluşturulacağı DOM düğümünü ekledik.
Modal bileşenini oluşturma
Artık Modal bileşeninin kendisine odaklanmanın zamanı geldi. Components/Modal.js oluşturup bu kodu ona ekleyelim.
import React from "react";
import ReactDOM from "react-dom";
const Modal = ({ onClose, children, title }) => {
const handleCloseClick = (e) => {
e.preventDefault();
onClose();
};
const modalContent = (
<div className="modal-overlay">
<div className="modal-wrapper">
<div className="modal">
<div className="modal-header">
<a href="#" onClick={handleCloseClick}>
x
</a>
</div>
{title && <h1>{title}</h1>}
<div className="modal-body">{children}</div>
</div>
</div>
</div>
);
return ReactDOM.createPortal(
modalContent,
document.getElementById("modal-root")
);
};
export default Modal
Ve işte yerleştirdiğim ve styles/globals.cssiçe aktarılması gereken stil pages/_app.js:
.modal-wrapper {
width: 500px;
height: 600px;
}
.modal {
background: white;
height:100%;
width:100%;
border-radius: 15px;
padding: 15px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-body {
padding-top: 10px;
}
.modal-header {
display: flex;
justify-content: flex-end;
font-size: 25px;
}
Burada CSS'nin her satırını anlatmaya gerek yok, unutulmaması gereken en önemli şey .modal-overlaytüm ekranı kaplaması ve mutlak konumlandırmaya sahip olması gereken bir overlay()'a sahip olmaktır. İçeride Modal öğesini ortalıyoruz.
Yeni oluşturulan Modal bileşenini sites/index.js dosyasında şu şekilde kullandım :
import Modal from "src/components/Modal";
import {useState} from "react";
export default function Home() {
const [showModal, setShowModal] = useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal &&
<Modal onClose={() => setShowModal(false)}>
Hello from the modal!
</Modal>
}
</div>
)
}
Umarım bu yazı işinize yarar ve bu konuda size bir fikir verebilir.
