خبرکاو:

Next.js یک فریمورک React است که ساخت برنامه های قدرتمند full stack (front end + back end) را بسیار آسان می کند.

تیم پشتیبان Next.js اخیراً Next.js 13 را منتشر کرد که دارای آینده‌های زیادی مانند فهرست app جدید، اجزای سرور و مشتری و غیره است.

در این مقاله، نحوه استفاده از پایگاه داده جدید Next.js 13 و Firebase را برای ساختن یک برنامه کامل پشته یاد خواهید گرفت.

قبل از اینکه ادامه دهید، این مقاله فرض می‌کند که دانش اولیه جاوا اسکریپت، React و Next.js دارید. اگر می‌خواهید این مهارت‌ها را تقویت کنید، در اینجا چند منبع مبتدی وجود دارد:

حالا اگر آماده هستید، بیایید شیرجه بزنیم.

چگونه یک پروژه Next.js 13 راه اندازی کنیم

برای راه اندازی Next.js، باید Node.js و npm/yarn را روی رایانه خود نصب کنید. اگر آنها را ندارید، می توانید آنها را از وب سایت های رسمی آنها نصب کنید: وب سایت Node.js و وب سایت npm (اما هنگام نصب Node npm گنجانده می شود).

در دایرکتوری مورد نظر خود، ترمینال خود را راه اندازی کنید و موارد زیر را اجرا کنید
npx [email protected] --experimental-app .

نام پروژه خود را وارد کنید و روی enter کلیک کنید و منتظر بمانید تا نصب شود.

یک دایرکتوری جدید با نام پروژه شما با فایل های لازم ایجاد می شود.

سی دی وارد دایرکتوری جدید شوید:
cd my-project-name

برای راه اندازی سرور توسعه، دستور زیر را اجرا کنید:

 // if you're using yarn yarn run dev // if you're using npm npm run dev

با اجرای آن دستور سرور توسعه راه اندازی می شود و می توانید برنامه Next.js 13 خود را در http://localhost:3000 اجرا کنید.

نحوه راه اندازی Firebase در Next.js

Firebase یک پلت فرم BaaS – Backend-as-a-Service – است که خدمات باطن ابری مانند احراز هویت، پایگاه داده بیدرنگ، ذخیره سازی ابری، تجزیه و تحلیل و موارد دیگر را ارائه می دهد.

در این آموزش قصد داریم از Firebase به عنوان پایگاه داده خود استفاده کنیم. مراحل زیر را برای ایجاد یک برنامه Firebase دنبال کنید:

به https://console.firebase.google.com/ بروید و با حساب Google خود وارد شوید.

روی گفت ن پروژه کلیک کنید و نام پروژه خود را انتخاب کنید. روی Continue کلیک کنید.

در صفحه بعدی می توانید انتخاب کنید که آیا می خواهید تجزیه و تحلیل را برای پروژه خود فعال کنید.

روی Create project کلیک کنید.

در مرحله بعد، باید یک برنامه وب ایجاد کنید. در صفحه اصلی پروژه خود روی نماد وب کلیک کنید تا برنامه وب خود را ایجاد کنید:



به برنامه وب خود یک نام بدهید و روی ثبت برنامه کلیک کنید.



فایل پیکربندی که بعداً به آن نیاز خواهیم داشت را کپی کنید. روی next کلیک کنید تا کارتان تمام شود.

دوباره در صفحه اصلی پروژه خود، محصولی را برای گفت ن به برنامه خود انتخاب کنید . به خاطر این آموزش، فقط Authentication و Cloud Firestore را اضافه کنید.



برای احراز هویت ، روش ورود به سیستم را انتخاب کنید، ایمیل/رمز عبور را اضافه کنید.

هنگامی که firebase را با موفقیت راه اندازی کردید، اکنون می توانیم از آن به عنوان یک Backend برای برنامه Next.js 13 خود استفاده کنیم.

برای استفاده از Firebase با Next.js، این مراحل را دنبال کنید:

با اجرای دستور زیر در ترمینال خود، آخرین Firebase SDK را روی پروژه Next.js خود نصب کنید

 yarn add firebase // or if you are using npm npm install firebase

یک فایل .env در دایرکتوری ریشه پروژه Next.js خود ایجاد کنید و فایل های پیکربندی Firebase خود را (آنهایی که قبلا کپی کرده اید) اضافه کنید. می بایست شبیه به این باشه:

 NEXT_PUBLIC_FIREBASE_API_KEY=api-key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=auth-domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=project-id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storage-bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=sender-id NEXT_PUBLIC_FIREBASE_APP_ID=app-id NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=analytic-id

در مرحله بعد، برای مرتب کردن همه چیز، در پوشه src خود یک پوشه به نام firebase ایجاد کنید و یک فایل config.js با کد زیر ایجاد کنید:

 // Import the functions you need from the SDKs you need import { initializeApp, getApps } from "firebase/app"; const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID, }; // Initialize Firebase let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]; export default firebase_app;

اکنون همه چیز آماده است، اکنون آماده استفاده از Firebase به عنوان پایگاه داده در برنامه Next.js 13 خود هستید.

نحوه تنظیم احراز هویت

وقتی صحبت از ساخت برنامه های فول استک می شود، اولین چیزی که به ذهن می رسد احراز هویت است. ما به راهی برای ثبت نام و ورود کاربران نیاز داریم و می توانیم این کار را به راحتی با Firebase انجام دهیم.

در دایرکتوری src > firebase ، یک دایرکتوری جدید به نام auth ایجاد کنید. ما تمام کدهای مربوط به احراز هویت firebase خود را در این فهرست اضافه می کنیم.

حالا یک فایل signup.js در دایرکتوری src > firebase > auth با کد زیر ایجاد کنید:

 import firebase_app from "../config"; import { createUserWithEmailAndPassword, getAuth } from "firebase/auth"; const auth = getAuth(firebase_app); export default async function signUp(email, password) { let result = null, error = null; try { result = await createUserWithEmailAndPassword(auth, email, password); } catch (e) { error = e; } return { result, error }; }

حالا بیایید این را کمی تفکیک کنیم. کاری که ما در اینجا انجام می دهیم، صادرات تابع signUp() است که از متد Firebase createUserWithEmailAndPassword() برای ثبت نام کاربران جدید استفاده می کند. اکنون می توانیم از این تابع signUp() در هر جایی از برنامه خود استفاده کنیم.

در همان فهرست، تابع signIn() خود را اضافه می کنیم. یک فایل signin.js با کد زیر ایجاد کنید:

 import firebase_app from "../config"; import { signInWithEmailAndPassword, getAuth } from "firebase/auth"; const auth = getAuth(firebase_app); export default async function signIn(email, password) { let result = null, error = null; try { result = await signInWithEmailAndPassword(auth, email, password); } catch (e) { error = e; } return { result, error }; }

نحوه ایجاد صفحات Signin و Signup در Next.js

در Next.js 13 صفحات جدیدی در فهرست app ایجاد می کنید. هر صفحه یک پوشه با یک فایل page.js است – می‌توانید درباره ایجاد صفحات از اسناد Next.js اطلاعات بیشتری کسب کنید.

برای ایجاد صفحه ثبت نام، یک فایل signup > page.js جدید در فهرست برنامه خود ایجاد کنید و کد زیر را اضافه کنید:

 'use client' import React from "react"; import signUp from "@/firebase/auth/signup"; import { useRouter } from 'next/navigation' function Page() { const [email, setEmail] = React.useState('') const [password, setPassword] = React.useState('') const router = useRouter() const handleForm = async (event) => { event.preventDefault() const { result, error } = await signUp(email, password); if (error) { return console.log(error) } // else successful console.log(result) return router.push("/admin") } return (<div className="wrapper"> <div className="form-wrapper"> <h1 className="mt-60 mb-30">Sign up</h1> <form onSubmit={handleForm} className="form"> <label htmlFor="email"> <p>Email</p> <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="[email protected]" /> </label> <label htmlFor="password"> <p>Password</p> <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" /> </label> <button type="submit">Sign up</button> </form> </div> </div>); } export default Page;`

به‌طور پیش‌فرض، هر صفحه‌ای که در فهرست app اضافه می‌کنید یک مؤلفه سرور است، به این معنی که نمی‌توانیم تعامل سمت کلاینت مانند گفت ن یک onSubmit() به یک عنصر فرم اضافه کنیم. برای گفت ن این تعامل سمت سرویس گیرنده، به Next.js می گوییم که ما یک مؤلفه Client قصد داریم با گفت ن موارد زیر در بالای فایل قبل از هر وارد کردن:

 'use client' // component code

به همین ترتیب، ما می توانیم صفحه ورود خود را ایجاد کنیم. برای ایجاد صفحه ورود به سیستم، یک فایل signin > page.js جدید در فهرست برنامه خود ایجاد کنید و کد زیر را اضافه کنید:

 'use client' import React from "react"; import signIn from "@/firebase/auth/signin"; import { useRouter } from 'next/navigation' function Page() { const [email, setEmail] = React.useState('') const [password, setPassword] = React.useState('') const router = useRouter() const handleForm = async (event) => { event.preventDefault() const { result, error } = await signIn(email, password); if (error) { return console.log(error) } // else successful console.log(result) return router.push("/admin") } return (<div className="wrapper"> <div className="form-wrapper"> <h1 className="mt-60 mb-30">Sign up</h1> <form onSubmit={handleForm} className="form"> <label htmlFor="email"> <p>Email</p> <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="[email protected]" /> </label> <label htmlFor="password"> <p>Password</p> <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" /> </label> <button type="submit">Sign up</button> </form> </div> </div>); } export default Page;

نحوه گوش دادن به تغییرات احراز هویت

در سراسر برنامه ما قصد داریم بتوانیم بگوییم که آیا یک کاربر خاص وارد شده است یا خیر. ما می توانیم صفحات محافظت شده ایجاد کنیم و فقط برخی از مطالب خاص را برای کاربر وارد شده نمایش دهیم. Firebase یک متد onAuthStateChanged() در اختیار ما قرار می دهد که می توانیم برای تغییرات به آن گوش دهیم.

برای در دسترس قرار دادن داده‌های کاربر از روش فوق در سراسر برنامه، ما از React Context API استفاده می‌کنیم. یک پوشه به نام context در دایرکتوری src خود ایجاد کنید. در پوشه زمینه فایلی به نام AuthContext.js ایجاد کنید و کد زیر را اضافه کنید:

 import React from 'react'; import { onAuthStateChanged, getAuth, } from 'firebase/auth'; import firebase_app from '@/firebase/config'; const auth = getAuth(firebase_app); export const AuthContext = React.createContext({}); export const useAuthContext = () => React.useContext(AuthContext); export const AuthContextProvider = ({ children, }) => { const [user, setUser] = React.useState(null); const [loading, setLoading] = React.useState(true); React.useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { setUser(user); } else { setUser(null); } setLoading(false); }); return () => unsubscribe(); }, []); return ( <AuthContext.Provider value={{ user }}> {loading ? <div>Loading...</div> : children} </AuthContext.Provider> ); };

در بالا ما به سادگی یک Provider ایجاد می کنیم که اگر کاربر وارد شده باشد، شی کاربر را برمی گرداند. اگر کاربر وارد نشده باشد، ما به سادگی null برمی گردانیم.

برای اینکه بتوانیم از مقدار ارسال شده به <AuthContext.Provider> استفاده کنیم، useAuthContext از فایل صادر می کنیم. با آن می توانیم از مقدار user استفاده کنیم.

قبل از اینکه بتوانیم از این زمینه استفاده کنیم، باید تمام اجزای خود را با AuthContextProvider بپیچیم. فایل src > app > layout.js را باز کنید و کد را با موارد زیر ویرایش کنید:

 'use client' import './globals.css' import { AuthContextProvider } from '@/context/AuthContext' export default function RootLayout({ children }) { return ( <html lang="en"> {/* <head /> will contain the components returned by the nearest parent head.js. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head */} <head /> <body> <AuthContextProvider> {children} </AuthContextProvider> </body> </html> ) }

اکنون می توانیم صفحات محافظت شده ایجاد کنیم و محتوای خاصی را برای کاربران مختلف نمایش دهیم.

نحوه ایجاد صفحات محافظت شده

دایرکتوری admin > page.js را در فهرست app خود ایجاد کنید و کد زیر را اضافه کنید:

 'use client' import React from "react"; import { useAuthContext } from "@/context/AuthContext"; import { useRouter } from "next/navigation"; function Page() { const { user } = useAuthContext() const router = useRouter() React.useEffect(() => { if (user == null) router.push("/") }, [user]) return (<h1>Only logged in users can view this page</h1>); } export default Page;

اگر user null باشد، به سادگی کاربر را به صفحه اصلی هدایت می کنیم. اگر کاربر null نباشد، صفحه محافظت شده را به او نشان می دهیم.

چگونه با پایگاه داده خود ارتباط برقرار کنیم

اکنون که بخش Authentication را به دست آورده ایم، می توانیم بر ارتباط با پایگاه داده خود تمرکز کنیم. برای پایگاه داده خود ما از Firestore استفاده می کنیم.

دوباره برای مرتب کردن همه چیز، یک دایرکتوری firebase > firestore جدید ایجاد کنید، در داخل این دایرکتوری ما تمام کدهای مربوط به Firestore خود را اضافه می کنیم.

نحوه گفت ن اسناد به Firestore

یک فایل به نام addData.js در پوشه firestore ایجاد کنید و کد زیر را اضافه کنید:

 import firebase_app from "../config"; import { getFirestore, doc, setDoc } from "firebase/firestore"; const db = getFirestore(firebase_app) export default async function addData(colllection, id, data) { let result = null; let error = null; try { result = await setDoc(doc(db, colllection, id), data, { merge: true, }); } catch (e) { error = e; } return { result, error }; }

در این مرحله این نوع کد باید برای شما آشنا باشد. ما تابعی را صادر می کنیم که داده ها را به پایگاه داده firestore ما اضافه می کند.

اکنون می توانیم از این تابع addData() از هر مؤلفه ای برای گفت ن داده به پایگاه داده خود استفاده کنیم:

 'use client' import addData from "@/firebase/firestore/addData"; export default function Home() { const handleForm = async () => { const data = { name: 'John snow', house: 'Stark' } const { result, error } = await addData('users', 'user-id', data) if (error) { return console.log(error) } } return ( ... ) }

نحوه دریافت سند از Firestore

با استفاده از یک رویکرد مشابه، می‌توانیم یک سند را از پایگاه داده Firestore خود دریافت کنیم.

یک فایل getData.js در پوشه Firestore ایجاد کنید و کد زیر را اضافه کنید:

 import firebase_app from "../config"; import { getFirestore, doc, getDoc } from "firebase/firestore"; const db = getFirestore(firebase_app) export default async function getDoument(collection, id) { let docRef = doc(db, collection, id); let result = null; let error = null; try { result = await getDoc(docRef); } catch (e) { error = e; } return { result, error }; }

همچنین می توانید از getData() در هر مؤلفه ای که انتخاب می کنید استفاده کنید.

نتیجه

در این مقاله، یاد گرفتیم که چگونه با استفاده از Firebase و Next.js 13 با یکپارچه سازی احراز هویت و تعامل با پایگاه داده، یک برنامه فول استک بسازیم.

کد نویسی مبارک!