» شروع کار با Next.js
شروع کار با Next.js
نکته: بخشی از این مقاله از سایت nextjs.org ترجمه شده است.
نکته: اگر لینک بالا باز نمیشود، به سایت shecan.ir بروید و راهنمایش را بخوانید!
به next.js خوش آمدید!
پیشنیاز: Node.js ورژن 10 یا بالاتر را باید نصب کرده باشید!
نصب
سه پکیج next , react , react-dom را در مسیر پروژه خود نصب نمایید!
npm install next react react-dom
فایل package.json را باز کنید و اسکریپت های زیر را وارد نمایید!
"scripts": { "dev": "next", "build": "next build", "start": "next start" }
این اسکریپت ها به گام هایی از توسعه وبسایت برمیگردند:
- کامند dev باعث روشن شدن موتور next میشود (development mode)
- کامند build باعث روشن شدن موتور next build میشود که اپلیکیشن را
برای production mode قابل استفاده میکند.
- کامند start باعث روشن شدن موتور next start میشود که سرور را برای production اماده میکند.
Next.js از محتویات فایل های متنوعی تشکیل شده است. فایل هایی با پسوند js , jsx , ts , tsx که در دایرکتوری pages قرار میگیرند. این برگه ها از روی نام خود یک روت شاخص دارند. مثلا فایل about.js را درنظر بگیرید! در مسیر pages/about.js قرار دارد!
اگر بخواهم روت برایش تعریف کنم مینویسم:
/about
علاوه بر این روت میتوان روت داینامیک هم اضافه کرد!
حالا وقت ان شده است که این فایل ها را ایجاد کنیم.
گام 1: یک دایرکتوری به نام pages ایجاد کنید (در پروژه قرار بگیرد!)
گام 2: سپس یک فایل در مسیر زیر ایجاد کنید!
pages/index.js
گام 3: محتویات این فایل را از اینجا کپی پیست کنید!
function HomePage() { return <div>Welcome to Next.js!</div> } export default HomePage
برای تماشای خروجی کافیست دو قدم طی شود!
قدم 1: به ترمینال رفته (شکل زیر را ببینید!) به گوشه سمت چپ ویندوز رفته و روی ایکون ویندوز کلیک راست کرده و گزینه windowsPowershell را انتخاب میکنم.
در ترمینال این خط را وارد میکنم
npm run dev
قدم 2: به بروزر ادرس http://localhost:3000 بروید!
ممنون از اینکه این مقاله را خواندید!