Разгледайте как да използвате променливи на средата в Next.js.
Next.js — името не е ново за всеки разработчик, който е работил с React. Той направи разработването на СПА зони лесно, като имаше множество маршрути. Той също така помогна при SEO поради метода си за изобразяване от страна на сървъра.
Next.js предлага много функции на нас като разработчици, като върши тежката работа под капака. Сред многото функции, които ни предлага Next.js, една от моите лични фаворити е вградената поддръжка за променливи на средата.
Променливите на средата са чудесен начин за съхраняване на поверителна информация за вашето приложение. API ключовете и паролите за бази данни са най-съхранените стойности като променливи на средата, но можете да съхранявате всичко.
Тези променливи са достъпни за цялото приложение и никога не се показват на браузъра и се съхраняват само на сървъра. Това прави променливите на средата толкова специални.
Не е нужно да зависим от някакъв външен пакет, за да използваме променливи на средата в нашия проект, тъй като Next.js ни дава вградена поддръжка.
За да използвате променливи на средата във вашия проект Next.js, създайте файл с име .env.local в главната директория на вашия проект. Можем да съхраняваме всички чувствителни стойности, свързани с нашето приложение, в този файл.
Променливи вътре в .env.local:
// inside '.env.local' file NAME=test123
Тук имаме променлива, наречена „NAME“, чиято стойност е „test123“. Както можете да видите, „test123“ е низ, но ние не го съхраняваме в единични или двойни кавички.
Всички променливи, които създаваме в този файл, се съхраняват само в този формат.
Поведението по подразбиране на променливите на средата на Next.js е, че тези променливи могат да бъдат достъпни само в средата на Node.js.
“getStaticProps” и “getServerSideProps” са два метода, предоставени ни от Next.js, които ни дават Node.js среда, която помага при извличането на данни и сървъра странично изобразяване. Ако не знаете за тези методи, бих ви препоръчал да прочетете за тях тук, за да разберете по-добре тази статия.
И двете функции поддържат модела Node process, който е глобален обект, което означава, че може да се използва без използване на „require“. Вътре в тези функции можете да напишете обикновен Node.js код. Тъй като тези функции поддържат Node.js, можете да използвате „process.env“ за достъп до променливите на средата.
Тези функции в крайна сметка връщат обект, който има ключ „props“, който отново е обект и този обект съдържа всички props, които искаме да използваме в нашето приложение.
Разгледайте примера по-долу:
// pages/index.js (inside the pages directory, rendering "index.js")
export default function Home(props) {
return <h1>{props.secret}</h1>;
}
function getStaticProps() {
return {
props: {
secret: props.env.NAME
}
}
}
Тук, когато поискаме страницата “index.js”, “getStaticProps” ще се стартира първо преди функционалния компонент “Home”, връщайки обекта “props”, който ще съдържа проп, наречен “secret” , чиято стойност извличаме от променливата на средата, която сме задали по-рано.
След като тази функция приключи, можем да получим достъп до „тайните“ подпори в нашия „Начален“ компонент. По този начин нашите тайни остават в безопасност и нашето приложение работи по начина, по който работеше по-рано.
Бих препоръчал да научите повече за getStaticProps и getServerSide props, тъй като те могат да направят много повече, вместо просто да помагат с променливите на средата. Разгледайте официалната им документация тук.
Заключение:
Next.js е много впечатляваща рамка за React за създаване на готово за производство приложение. Той предлага не само променливи на средата, но и много повече. Можете да разгледате тяхната официална документация тук.
В един или друг момент като разработчик ще трябва да съхранявате някаква информация някъде, където не е изложена на крайния потребител, и използването на променливи на средата ни помага да постигнем това.
Повече съдържание в plainenglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Получете изключителен достъп до възможности за писане и съвети в нашата общност Discord.
