از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای شروع به کار با Next.js – ایجاد یک Next.js AppNext.js یک چارچوب جاوا اسکریپت منبع باز است که توسط Vercel برای بهبود برنامه های React با ویژگی هایی مانند رندر سمت سرور و تولید سایت استاتیک ایجاد شده است. به طور سنتی، React برای ایجاد برنامه های یک صفحه ای (SPA) استفاده می شود که محتوای آنها رندر می شود. روی سمت مشتری Next.js با اجازه دادن به توسعه دهندگان برای ایجاد…
سرفصلهای مطلب
معرفی
Next.js یک چارچوب جاوا اسکریپت منبع باز است که توسط Vercel برای بهبود برنامه های React با ویژگی هایی مانند رندر سمت سرور و تولید سایت استاتیک.
به طور سنتی، React برای ایجاد استفاده می شود برنامه های تک صفحه ای (SPA) که مطالب آن ارائه شده است روی سمت مشتری Next.js با اجازه دادن به توسعه دهندگان برای ایجاد برنامه هایی که می توانند اقدامات سمت سرور، مسیرهای پیش واکشی و پشتیبانی از TypeScript را انجام دهند، این را گسترش می دهد. علاوه بر این – به طور پیش فرض نیازی به پیکربندی اضافی ندارد!
در این راهنما، نگاهی به ویژگی‌ها و عملکردهای مربوط به Next.js خواهیم داشت. برای تحکیم دانش جدید، ما یک مجموعه کامل چندگانه خواهیم ساختpage برنامه آب و هوا که با API های خارجی صحبت می کند و به کاربر اجازه می دهد حالت های داده شده را ضبط کند.
نصب و راه اندازی
ساده ترین راه برای ایجاد یک برنامه Next.js جدید استفاده از create-next-app ابزار CLI. می توانید آن را از طریق نصب کنید npm:
$ npm install create-next-app
پس از نصب، می توانید یک برنامه Next.js جدید را با فراخوانی ابزار و ارائه یک نام برای پروژه خود مقداردهی اولیه کنید:
$ npx create-next-app weather-app
توجه داشته باشید: اگر قبلاً ندارید create-next-app نصب شده است – npx از شما می خواهد که آن را به طور خودکار نصب کنید.
هنگامی که ابزار آماده سازی یک پروژه اسکلت را به پایان رساند، بیایید به فهرست راهنما برویم و به داخل آن نگاهی بیندازیم:
$ cd weather-app
$ ls
README.md node_modules/ package.json public/
next.config.js package-lock.json pages/ styles/
استاندارد package.json، package-lock.json و node_modules وجود دارد، با این حال، ما نیز باید /pages، /public و /styles دایرکتوری ها، و همچنین a next.config.js فایل!
بیایید نگاهی به اینها بیندازیم.
ویژگی های Next.js
Next.js در نهایت یک افزونه برای React است و چند چیز جدید را معرفی می کند که توسعه برنامه React را ساده تر و سریع تر می کند – با شروع صفحات Next.js.
صفحات
Next.js ایجاد چندpage برنامه های کاربردی با React به طرز مسخره ای با پیش فرض آن آسان است روتر مبتنی بر سیستم فایل. شما نیازی به نصب هیچ بسته اضافی ندارید، مانند react-router-dom، یا اصلاً یک روتر را پیکربندی کنید.
همه پروژه های Next.js دارای یک پیش فرض هستند /pages دایرکتوری، که خانه تمام اجزای React است که استفاده می کنید. برای هر مؤلفه – یک روتر به a page مستقر روی آن جزء
یک جزء React است آ page در چشمان Next، و به طور خودکار ارائه می شود روی مسیر مربوط به نام فایل آن
به عنوان مثال، فرض کنید ما یک جزء ایجاد می کنیم، contact.js، در داخل /pages فهرست راهنما:
const Contact = () => {
return (
<div>
Contact
</div>
)
}
export default Contact
روتر مبتنی بر سیستم فایل که Next.js استفاده می‌کند، این کار را می‌کند page قابل دسترسی در زیر /contact مسیر! تنها استثناء این قاعده است index.js page، که در زیر قرار ندارد /index مسیر، بلکه در آن ارائه می شود /.
علاوه بر این، شما می توانید مسیرهای لانه با Next.js، بنابراین شما به راحتی می توانید a ایجاد کنید /weather/berlin به صورت پویا با ایجاد یک /weather پوشه، و پویا (city).js جزء به عنوان page.
توجه داشته باشید: برای مسیرهای پویا، باید نام فایل در مجموعه ای از پرانتز مربع. بدون آنها، یک رشته تحت اللفظی ثابت است و به این ترتیب تجزیه می شود. city.js حل خواهد کرد به /weather/city مسیر، و برای هیچ چیز دیگری مطابقت ندارد. از سوی دیگر (city.js) برای /weather/berlin، /weather/london، /weather/lagos، و غیره.
این <پیوند> جزء
این <Link> جزء را می توان برای پیمایش بین صفحات در برنامه های شما استفاده کرد. با فرض پروژه ما page ساختار دارای چندین صفحه در زیر است /pages فهرست راهنما:
- pages
- index.js
- weather.js
- contact.js
این <Link> اجزاء href از ویژگی می توان برای اشاره به مسیر نسبی هر کدام استفاده کرد page، با شروع در /pages فهرست راهنما:
import Link from "next/link";
export default function Home() {
return (
<div>
<Link href="/">Home</Link>
<Link href="/weather">Weather</Link>
<Link href="/contact">Contact</Link>
</div>
)
}
به طور طبیعی، اگر یک سلسله مراتب تو در تو از فایل ها دارید، می توانید به صفحات تودرتو نیز لینک دهید:
- pages
- weather
- (city).js
import Link from "next/link";
export default function Weather() {
return (
<div>
<Link href="/weather/berlin">Berlin</Link>
<Link href="/weather/london">London</Link>
<Link href="/weather/lagos">Lagos</Link>
</div>
)
}
این <Link> جزء نیز می تواند پیش واکشی صفحات! یک بار در page بارگذاری شده است، و چندین لینک به صفحات دیگر وجود دارد – اگر می دانید که مشخص است page باید اغلب بازدید شود، یا می‌خواهم مطمئن شوم که page در اسرع وقت بارگذاری می شود (بدون تأثیر اولیه page)، می توانید از قبل واکشی کنید page مرتبط با الف <Link> برای اینکه انتقال سریعتر و روانتر انجام شود!
در واقع Next.js به صورت پیش فرض تمام صفحات را از پیش واکشی می کند. برای این منظور، اگر می خواهید سرعت انتقال به یک معین را افزایش دهید page، شما تنظیم کنید
prefetchنسبت بهfalseبرای صفحات دیگر
به عنوان مثال، می توان تصور کرد که در یک برنامه هواشناسی، افراد بیشتر به /weather مسیر از خانه page، به جای /about. نیازی به واکشی از قبل وجود ندارد about.js page/component، زیرا سرور را برای یک بار بیشتر می کنید page به احتمال زیاد روی آن کلیک نمی شود. از سوی دیگر – weather.js به احتمال زیاد مسیر بعدی است که افراد بازدید می‌کنند، بنابراین می‌توانید با واکشی از قبل آن، مدتی را در مرحله انتقال از بین ببرید:
import Link from "next/link";
export default function Home() {
return (
<div>
<Link prefetch=true href="/weather">Weather</Link>
<Link prefetch=false href="/about">About Us</Link>
</div>
)
}
برخی از ویژگی های دیگر عبارتند از scroll ویژگی (که به طور پیش فرض به true) که کاربر را به بالای صفحه هدایت می کند page وقتی آنها خود را با یک تغییر مسیر می دهند <Link>. این یک پیش‌فرض بسیار معقول است، اگرچه ممکن است بخواهید آن را برای یک اثر خاص‌تر که می‌خواهید به دست آورید، خاموش کنید.
یکی دیگر از ویژگی های قابل توجه است replace ویژگی، که به طور پیش فرض به false. اگر تنظیم شود true، به جای فشار دادن یک ورودی جدید، هنگامی که به یک جدید پیمایش می کنید، آخرین ورودی در پشته تاریخ را جایگزین می کند. page/مسیر با الف <Link>.
صفحات پیش رندر
صحبت از واکشی و پیش رندر کردن صفحات شد – این ویژگی Next.js یکی از مرتبط‌تر است. مجدداً، به‌طور پیش‌فرض، Next.js تمام صفحاتی را که به آنها پیوند می‌دهید، از قبل واکشی می‌کند و امکان انتقال سریع و روان بین آنها را فراهم می‌کند.
برای هر page، می توانید یکی را انتخاب کنید رندر سمت سرور یا تولید استاتیک و اینکه کدام تکنیک استفاده می شود بستگی دارد روی توابعی که برای واکشی داده ها استفاده می کنید. شما مجبور نیستید به یکی از این تکنیک ها برای کل برنامه پایبند باشید!
انتخاب بین SSR و SG یک سوال است که می خواهید بار را کجا قرار دهید و هر دو تکنیک‌ها صفحات را از قبل اجرا می‌کنند، فقط به روشی متفاوت.
اگر صفحات خود را رندر کنید روی پایان سرور، آنها ارائه خواهند شد روی هر درخواست، با استفاده از منابع سرور شما، و برای کاربر نهایی ارسال می شود. اگر به صورت ایستا یک را ایجاد کنید page، یک بار تولید می شود و پس از زمان ساخت قابل استفاده مجدد است.
توجه داشته باشید: به طور کلی، شما می خواهید استفاده کنید تولید استاتیک هر زمان که نیازی به استفاده نباشد رندر سمت سرور از آنجا که page سپس می توان آن را در حافظه پنهان و استفاده مجدد، صرفه جویی در محاسبات ارزشمند. هر زمان که اجزا روی صفحات مکرر هستند، رندر سمت سرور مورد نیاز است و page در صورت درخواست با داده های جدید ارائه می شود (که برخی از آنها ممکن است بستگی داشته باشند روی خود درخواست).
همچنین ممکن است تصمیم بگیرید به برخی از صفحات یا عناصر اجازه دهید روی را page از طریق ارائه شود رندر سمت مشتری که بار را قرار می دهد روی ماشین کاربر نهایی، اما شما هیچ تضمینی یا کنترلی بر منابع آنها ندارید، بنابراین معمولاً می‌خواهید از هر گونه محاسبات فشرده اجتناب کنید. روی پایان آنها
پیش رندر در عمل مستلزم چه چیزی است؟
این چگونه بر کاربر نهایی تأثیر می گذارد و چگونه یک برنامه ساده React را بهبود می بخشد؟ پیش رندر به کاربر اجازه می دهد تا آن را ببیند page حتی قبل از اینکه کد جاوا اسکریپت بارگیری شود. زمان بسیار کمی طول می کشد تا جاوا اسکریپت بارگیری شود – اما اینها میلی ثانیه ناخواسته بر درک ما تأثیر می گذارد. حتی اگر page به صورتی نشان داده می شود که پس از بارگیری همه مؤلفه ها توسط کاربر مشاهده می شود – هیچ کدام هنوز کار نمی کنند.
فقط یک بار است page نشان داده شده است که اجزا در حال پردازش و بارگذاری هستند تا به اجزای تعاملی تبدیل شوند. این process نامیده میشود هیدراتاسیون.
بدون Next.js، page هنگامی که جاوا اسکریپت بارگیری می شود و اجزا در حال اولیه سازی هستند خالی خواهد بود.
از آنجایی که پیش رندر یک است انتگرال بخشی از Next.js، برخی از توابع را که می توانید برای تسهیل پیش رندر استفاده کنید، از طریق SSR و SG.
واکشی داده های سمت سرور – getServerSideProps()
این getServerSideProps() تابع برای انجام عملیات مربوط به سرور مانند واکشی داده ها از یک API خارجی استفاده می شود. باز هم، شما می خواهید هر زمان که داده ها SSR را انجام دهید روی را page به سرعت تغییر می کند، و ذخیره آن منطقی نیست. به عنوان مثال، یک API ممکن است با قیمت‌های سهام یا زمان به‌روز شده پاسخ دهد روی یک ساعت در هر ثانیه، و روی هر درخواست کاربر – اینها باید به روز باشند.
در اینجا مثالی وجود دارد که درخواستی را به یک API نمونه ارسال می کند و داده های دریافت شده را به عنوان پشتوانه به ما ارسال می کند page جزء:
const Weather = ({temperature}) => {
// display temperature
}
export default Weather
export async function getServerSideProps() {
const res = fetch('http://example.com/api')
...
const temperature = res.temperature
return {
props: {temperature},
}
}
این getServerSideProps() الف را دریافت می کند context شی که حاوی اطلاعات مربوط به سرور مانند درخواست های دریافتی، پاسخ های سرور، پرس و جوها است. این بسیار مهم است، زیرا خود رندر ممکن است بستگی داشته باشد روی را context.
مسیرهای تولید ایستا – getStaticPaths()
ما استفاده می کنیم getStaticPaths() تابع برای تعریف لیستی از مسیرهایی که باید به صورت ایستا برای یک مسیر پویا تولید شوند. بگو ما یک مسیر پویا داریم pages/weather/(city).js و ما export آ getStaticPaths() در این فایل مانند زیر عمل کنید:
export async function getStaticPaths() {
return {
paths: ({ params: { id: 'paris' } }, { params: { id: 'london' } }),
};
}
Next.js به صورت خودکار تولید می شود /weather/paris و /weather/london برای ما در زمان ساخت
لوازم تولید استاتیک – getStaticProps()
این getStaticProps() تابع مشابه است getServerSideProps() به این معنا که از آن برای بارگذاری وسایل استفاده می کنیم روی از پیش رندر شده page. با این حال، در این مورد، props به صورت ایستا در زمان ساخت تولید می‌شوند و بعداً برای همه درخواست‌ها مجدداً استفاده می‌شوند، به جای اینکه در زمان درخواست ارائه شوند:
export async function getStaticProps() {
const res = await fetch('http://someapi/toget/cities')
...
const cities = await res.json()
return {
props: {
cities,
},
}
}
توجه داشته باشید: getStaticPaths() با کار نخواهد کرد getServerSideProps() – در عوض، استفاده کنید getStaticProps(). بهتر است از این تابع فقط زمانی استفاده کنید که داده‌هایی که از قبل ارائه می‌شوند به سرعت بارگیری می‌شوند یا می‌توانند به صورت عمومی ذخیره شوند.
<سر/> & سئو
از آنجا که برنامه های کاربردی تک صفحه ای خزیدن توسط موتورهای جستجو دشوار است، بهینه سازی برنامه های React برای موتورهای جستجو ممکن است دشوار باشد. در حالی که رندر سمت سرور Next.js به این موضوع می پردازد، فریم ورک شامل یک ویژگی خاص نیز می شود <Head /> مولفه ای که اضافه کردن عناصر را به سر خود آسان می کند page.
در نتیجه، به روز رسانی تنظیمات SEO صفحات برنامه مانند برچسب عنوان، توضیحات متا و هر عنصر دیگری که در یک HTML استاندارد گنجانده اید. <head> برچسب ساده تر است:
import Head from "next/head";
const Contact = () => {
return (
<div>
<Head>
<title>Contact</title>
<meta name="description" content="Welcome to our contact page!"/>
</Head>
</div>
);
};
export default Contact;
ایجاد مسیرهای API با Next.js
Next.js همچنین یک ویژگی برای توسعه API خود را در داخل پروژه ارائه می دهد process شبیه ایجاد صفحات است! برای شروع، باید یک جدید ایجاد کنید api زیر شاخه زیر /pages (یعنی /pages/api) و هر فایلی در این دایرکتوری به آن هدایت می شود /api/*.
بگو، ما یک فایل ایجاد می کنیم
/pages/api/weather.js. یک نقطه پایانی بلافاصله به عنوان قابل دسترسی است/api/weather.
برای اینکه این نقاط پایانی کار کنند، باید export یک پیش فرض handler() تابع (کنترل کننده درخواست) برای هر نقطه پایانی که دو پارامتر را دریافت می کند: req (درخواست ورودی)، و res (پاسخ سرور).
برای امتحان کردن این، بیایید ما را به روز کنیم /pages/api/weather.js مثال با محتوای زیر:
export default function handler(req, res) {
res.status(200)
res.json({
city: 'London',
temperature: '20',
description: 'sunny',
});
}
در صورت بازدید یا ارسال درخواست به /api/weather، باید ببینیم که اطلاعات آب و هوای ساختگی لندن بازگردانده شده است، و همچنین a 200 کد پاسخ.
دارایی های ایستا
در برخی موارد، احتمالاً می خواهید دارایی هایی مانند تصاویر، فیلم ها، فونت ها و غیره را بارگیری کنید. روی. همه پروژه های Next.js دارای یک دایرکتوری به نام هستند /public به این منظور.
فایل ها در
/publicدایرکتوری را می توان از هر نقطه در برنامه شما با قرار دادن منبع اصلی با URL اصلی (/).
مثلاً اگر فایلی در زیر داشته باشیم /public/weather-icon.svg، ما می توانیم در هر کامپوننت با استفاده از:
const WeatherIcon = () => {
return <img src="/weather-icon.svg" alt="Weather Icon"/>
}
export default WeatherIcon
متغیرهای محیطی Next.js
متغیرهای محیطی متغیرهایی هستند که مقادیر آنها خارج از برنامه ما تنظیم شده است و ما بیشتر از آنها برای حفظ داده های حساس مانند کلیدهای API یا تنظیمات سرور استفاده می کنیم تا از فشار دادن آنها به ابزارهای کنترل نسخه مانند GitHub، GitLab و غیره جلوگیری کنیم.
Next.js پشتیبانی از کار با متغیرهای محیطی را از طریق a .env.local فایل. تمام متغیرهای این فایل به نگاشت می‌شوند process.env.
اگر ما یک .env.local فایل با متغیرهای زیر:
WEATHER_API_KEY=abcd123
CITY_API_KEY=123abc
اکنون می توانیم از طریق آنها به آنها دسترسی داشته باشیم process.env.WEATHER_API_KEY و process.env.CITY_API_KEY.
همچنین، متغیرهای محیطی به طور پیش فرض در مرورگر نمایش داده نمی شوند و فقط در محیط Node.js قابل دسترسی هستند (روی سمت سرور). با این حال، می‌توانیم با قرار دادن پیشوند متغیر ترجیحی با، آنها را در معرض سمت مشتری قرار دهیم NEXT_PUBLIC_. به عنوان مثال، اگر یک متغیر داشته باشیم:
NEXT_PUBLIC_CITY_API_KEY=123abc
این متغیر اکنون در هر نقطه از برنامه ما از طریق قابل دسترسی است process.env.NEXT_PUBLIC_CITY_API_KEY.
ساخت اپلیکیشن آب و هوا با Next.js
ما قبلاً زمین های زیادی را پوشانده ایم! تثبیت دانش جدید به بهترین وجه از طریق تمرین به دست می آید، بنابراین ایجاد یک برنامه کاربردی برای تکمیل نظریه جدید مفید است.
ما در حال ساخت یک برنامه آب و هوا خواهیم بود که شهر کاربر را تشخیص می دهد و اطلاعات آب و هوا را بر اساس نمایش می دهد روی آن اطلاعات علاوه بر این، ما قابلیتی را پیاده سازی خواهیم کرد که به کاربران امکان می دهد اطلاعات خاص آب و هوا را در هر لحظه ذخیره کنند و بعداً به آن دسترسی داشته باشند.
برنامه چیزی شبیه به این خواهد بود:
اگر قبلاً این کار را نکرده اید، یک برنامه Next.js جدید با دستور زیر ایجاد کنید:
$ npx create-next-app weather-app
و ما می توانیم برنامه خود را با موارد زیر شروع کنیم:
$ npm run dev
برای سادگی و اختصار، ما به جای نوشتن CSS سفارشی، از Bootstrap برای تنظیم رابط برنامه خود استفاده خواهیم کرد. با استفاده از دستور زیر می توانید بوت استرپ را نصب کنید:
$ npm install bootstrap
پس از اتمام نصب، بیایید باز کنیم pages/_app.js و شامل یک ورودی برای Bootstrap:
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
توجه داشته باشید: این _app.js فایل پیش فرض است برنامه جزء که Next.js برای مقداردهی اولیه صفحات استفاده می کند. این به عنوان نقطه شروع برای همه شما عمل می کند pageاجزای
اکنون، می‌توانیم با تغییر فونت پیش‌فرض و افزودن یک رنگ پس‌زمینه زیبا، اپلیکیشن خود را از نظر بصری جذاب‌تر کنیم. بیا باز کنیم styles/global.css و تغییرات زیر را انجام دهید:
@import url('https://fonts.googleapis.com/css2؟family=Be+Vietnam+Pro:wght@100;200;300;400;500;800;900&display=swap');
body {
background: #4F32FF;
color: #fff;
font-family: 'Be Vietnam Pro', sans-serif;
}
این برای شروع کافی است! بیایید ساختار صفحات و مکان‌نماهای خود را برای داده‌هایی که از طریق یک API واکشی می‌شوند، تعریف کنیم.
نشانه گذاری صفحه
برای قسمت جلویی ما، بیایید باز کنیم pages/index.js و نشانه گذاری (ساختار) خانه خود را تعریف کنید page:
import Link from "next/link";
export default function Home() {
return (
<div>
<div
className="d-flex justify-content-center align-items-center"
style={{ minHeight: "100vh" }}
>
<div>
<div>
<h1 className="fw-bolder" style={{ fontSize: "60px" }}>
Null City.
</h1>
13 January, 2022
</div>
<div className="d-flex justify-content-between align-items-center mt-4">
<div className="pe-5">
<h2 className="d-inline">0</h2>
<sup>°C</sup>
<p className="text-info">Cloudy</p>
</div>
<div>
<img src="/1.png" alt="" width={100} draggable="false" />
</div>
</div>
<hr />
<div className="d-md-flex justify-content-between align-items-center mt-4">
<button className="btn btn-success border-0 save-btn px-4 py-3">
Timestamp
</button>
<Link href="/history">
<button className="btn btn-danger border-0 history-btn px-4 py-3 ms-auto">
My History
</button>
</Link>
</div>
</div>
</div>
</div>
);
}
توجه داشته باشید: شما باید نماد آب و هوا را از ما دانلود کنید GitHubو آن را در پروژه خود بگنجانید /public پوشه
و در این مرحله، اگر برنامه خود را در مرورگر پیش‌نمایش کنیم، باید خروجی زیر را با داده‌های ساختگی ببینیم:
دریافت اطلاعات آب و هوا
ما از یک API رایگان آب و هوا برای دریافت اطلاعات آب و هوای فعلی کاربر استفاده خواهیم کرد، اما چون می‌خواهیم اطلاعات آب و هوای شهری را که کاربر در حال حاضر در آن است نمایش دهیم، باید از API دیگری برای دریافت شهر فعلی کاربر استفاده کنیم و این را پاس کنیم. پارامتر به API آب و هوا برای به دست آوردن اطلاعات مورد نظر.
تصویر زیر این موضوع را توضیح می دهد process
برای به دست آوردن اطلاعات آب و هوا، ما از آن استفاده خواهیم کرد OpenWeather API، و در حالی که آنها یک طرح رایگان ارائه می دهند، برای به دست آوردن یک کلید API باید یک حساب ایجاد کنید.
و برای بازیابی شهر کاربر، از یک رایگان استفاده خواهیم کرد IP Geolocation API که برای استفاده نیازی به کلید API ندارد.
همچنین، ما می خواهیم مطمئن شویم که اطلاعات آب و هوا بلافاصله پس از نمایش داده می شود page بارگذاری شده است، بنابراین Next.js getServerSideProps() در اینجا به کار می آید!
حال، بیایید صادرات زیر را به آن اضافه کنیم index.js برای انجام تمام عملکردهای ذکر شده در بالا:
export async function getServerSideProps() {
const ipRequest = await fetch(`http://ip-api.com/json/`);
const ipData = await ipRequest.json();
const city = ipData.regionName;
const api_key = 'YOUR_OPEN-WEATHER_API_KEY';
const url = `http://api.openweathermap.org/data/2.5/weather؟q=${city},&appid=${api_key}&units=metric`;
const weatherRequest = await fetch(url);
const weatherInfo = await weatherRequest.json();
console.log(weatherInfo);
return { props: { weatherInfo, city } };
}
کد بالا دو عملیات ناهمزمان را انجام می دهد:
- اولین مورد بازیابی شهر کاربر است که آن را در متغیری به نام ذخیره می کنیم
city. - دوم ارسال درخواست به API آب و هوا.
و در نهایت، ما نتیجه برگردانده شده از API آب و هوا و همچنین شهر را به عنوان پشتوانه ای برای نمایه خود پاس کرده ایم. page.
توجه داشته باشید: شما باید جایگزین کنید YOUR_OPEN-WEATHER_API_KEY با کلید OpenWeather API خودتان.
اطلاعات مورد نیاز اکنون به عنوان یک پایه برای نمایه ما ذخیره می شود page که در weatherInfo و city، و ما می توانیم از طریق:
...
export default function Home({ weatherInfo, city }) {
...
}
اگر سعی می کنید وارد شوید weatherInfo به console، متوجه خواهید شد که اطلاعات زیادی از جمله مختصات کاربر و برخی اطلاعات دیگر که برای برنامه ما لازم نیست، بازگردانده شده است. با توجه به طراحی اپلیکیشن ما، فقط به داده های زیر نیاز داریم:
- شهر کاربر
- دمای فعلی
- شرح آب و هوا (به عنوان مثال ابری، باران خفیف، برف، و غیره)
در نهایت، یک نماد آب و هوا بر اساس روی دمای فعلی دمای فعلی برگردانده می شود weatherInfo.main.temp، و توضیحات آب و هوا در weatherInfo.weather(0).description.
بنابراین، اجازه دهید پیش برویم و داده های ساختگی را در نشانه گذاری خود با این اطلاعات جایگزین کنیم:
{/* ... */}
<div>
<h1 className="fw-bolder" style={{fontsize: "60px"}}>
{city}
</h1>
13 January, 2022
</div>
<div className="d-flex justify-content-between align-items-center mt-4">
<div className="pe-5">
<h2 className="d-inline">
{Math.round(weatherInfo.main.temp)}</h2>
<sup>°C</sup>
<p className="text-info text-capitalize">
{weatherInfo.weather(0).description}
</p>
</div>
<div><img src='/1.png' alt="" width={100} draggable="false" /></div>
</div>
{/* ... */}
ما همچنین می توانیم از OpenWeather API برای دریافت نماد آب و هوا استفاده کنیم روی دمای فعلی را به سادگی با عبور نام نماد به عنوان یک پارامتر، و خوشبختانه این نیز در دسترس است $weatherInfo.weather(0).icon.
بنابراین، بیایید جلو برویم و نماد را جایگزین کنیم <img> با کد زیر تگ کنید:
{/* ... */}
<img
src={`http://openweathermap.org/img/wn/${weatherInfo.weather(0).icon}@2x.png`}
/>
{/* ... */}
و برنامه ما باید کاملاً عملیاتی باشد و اطلاعات آب و هوای فعلی را نمایش دهد روی شهری که در حال حاضر در آن هستیم:
ذخیره داده ها به صورت محلی
حالا بیایید تابعی ایجاد کنیم که اطلاعات آب و هوای فعلی و همچنین تاریخ و زمان ذخیره آن را در مرورگر ذخیره کند. localStorage. هر ورودی به عنوان یک شی با ساختار زیر ذخیره می شود:
{
date: 'Current Date',
time: 'Current Time',
city: 'User\'s City',
temperature: 'User\'s city temperature',
description: 'Weather Description',
};
برای انجام این کار، یک تابع جدید ایجاد کنید saveWeather() (هنوز داخل ماست index.js فایل) با کد زیر:
const saveWeather = () => {
const date = new Date();
let data = {
date: `${date.getDate()} ${date.getMonth() + 1} ${date.getFullYear()}`,
time: date.toLocaleTimeString(),
city: city,
temperature: weatherInfo.main.temp,
description: weatherInfo.weather(0).description,
};
let previousData = localStorage.getItem('weatherHistory');
previousData = JSON.parse(previousData);
if (previousData === null) {
previousData = ();
}
previousData.push(data);
localStorage.setItem('weatherHistory', JSON.stringify(previousData));
alert('Weather saved successfully');
};
کد بالا هر داده ای که قبلاً در آن ذخیره شده است را تجزیه می کند localStorage.weatherHistory به عنوان JSON و بسته به روی نوع داده برگردانده شده، ورودی جدید خود را به یک آرایه فشار داده ایم، این آرایه را به رشته تبدیل کرده و آن را در localStorage.weatherHistory. ما باید این کار را انجام دهیم زیرا localStorage فقط می تواند رشته ها را ذخیره کند و انواع داده های دیگر را نمی تواند ذخیره کند.
اگر می خواهید در مورد آن بیشتر بخوانید
localStorage– راهنمای ما برای ذخیره داده ها در مرورگر با LocalStorage را بخوانید!
و البته، ما می خواهیم این تابع را زمانی فراخوانی کنیم که کاربر روی آن کلیک می کند مهر زمان دکمه، پس بیایید یک را اضافه کنیم onClick ویژگی به دکمه:
<button onClick={saveWeather}>Timestamp</button>
صفحه تاریخچه آب و هوا
در نهایت، ما نیاز به ایجاد یک اختصاصی داریم page برای دسترسی به تمام اطلاعات آب و هوا که در مرورگر ما ذخیره شده است localStorage.
توجه داشته باشید: ما نمی توانیم از توابع واکشی داده Next.js استفاده کنیم زیرا localStorage یا هر شی سند دیگری در دسترس نیست روی سرور، بنابراین ما باید تکیه کنیم روی واکشی داده های سمت مشتری
جدید ایجاد کنید history.js فایل زیر pages دایرکتوری با محتوای زیر:
import { useState, useEffect } from "react";
const History = ({}) => {
const (weatherHistory, setweatherHistory) = useState(());
useEffect(() => {
setweatherHistory(
localStorage.weatherHistory !== undefined
? JSON.parse(localStorage.weatherHistory)
: ()
);
}, ());
return (
<div
className="d-flex justify-content-center align-items-center p-3"
style={{ minHeight: "100vh" }}
>
<div>
{" "}
<h2>My Weather History</h2>
<div className="mt-5">
{weatherHistory.length > 0 ? (
weatherHistory.map((weather, index) => {
return (
<div
key={index}
className="card mb-3"
style={{ width: "450px" }}
>
<div className="card-body text-dark">
<h5 className="card-title ">
{weather.city} - {weather.date}
</h5>
<small>{weather.time}</small>
<hr />
<p className="card-text">
<span className="font-weight-bold">Temperature: </span>
{weather.temperature}
<sup>°C</sup>
</p>
<p className="card-text">
<span className="font-weight-bold">Condition: </span>
{weather.description}
</p>
</div>
</div>
);
})
) : (
<p>Nothing to see here - yet</p>
)}
</div>
</div>
</div>
);
};
export default History;
کد بالا بررسی می کند که آیا localStorage.weatherHistory وجود دارد، در صورت وجود – ما داده ها را تجزیه می کنیم و آن را روی یک متغیر جدید تنظیم می کنیم weatherHistory. اگر اینطور نیست، به جای آن، این متغیر را روی یک آرایه خالی قرار داده ایم.
در نشانه‌گذاری، بررسی می‌کنیم که آیا حداقل یک ورودی داده در ما وجود دارد یا خیر weatherHistory آرایه و با استفاده از جاوا اسکریپت .map() تابع، ما در تمام موارد موجود در آن تکرار می کنیم weatherHistory، آنها را در صفحه وب ما نمایش می دهیم.
بیایید جلو برویم و روی آن کلیک کنیم مهر زمان دکمه روی شاخص page برای ثبت اطلاعات آب و هوای فعلی و زمانی که به تاریخچه باز می گردید page، باید چیزی شبیه به این را ببینید:
نتیجه
Next.js یک چارچوب جاوا اسکریپت است که به طور خاص برای بهبود و تقویت توسعه برنامه های کاربردی React طراحی شده است.
در این راهنما، ویژگی‌های مربوط به کتابخانه را بررسی کرده‌ایم – روش ایجاد و مسیریابی صفحات از طریق Next.js. سیستم مسیریابی فایل، چگونه <Link> کامپوننت کار می کند، واکشی اولیه و پیش رندر چیست و چگونه می توان از آن برای بهبود تجربه کاربر استفاده کرد، چگونه مسیرهای API و کنترل کننده های درخواست را می توان به راحتی ایجاد کرد و چگونه با متغیرهای محیط کار کرد.
برای تکمیل آن – ما یک برنامه آب و هوا ساختیم که با APIهای خارجی ارتباط برقرار می کند تا داده ها را واکشی کرده و به کاربر نهایی نمایش دهد، و به آنها اجازه می دهد هر مهر زمانی معینی را در حافظه محلی خود ذخیره کنند.
باز هم، کد منبع کامل برنامه در دسترس است روی GitHub.
منتشر شده در 1403-01-13 13:58:06
