Next.JS راهنمای تنظیم برای توسعه دهندگان

این پست یک راهنمای گام به گام برای تنظیم next-hello-world پروژه با استفاده از Next.js با TypeScript ، ایجاد یک مخزن GIT و بارگذاری کد خود برای اولین بار.

فهرست مطالب

1. ایجاد یک پروژه Next.js با TypeScript
2. ایجاد یک مخزن جدید git خصوصی
3. تنظیم پیکربندی git برای این پروژه
4. برای اولین بار کد محلی خود را در GIT بارگذاری کنید
5. مراحل بعدی

1. ایجاد یک پروژه Next.js با TypeScript

پیش نیازهای

• node.js 18.17 یا بعد نصب شده است
• مدیر بسته NPM یا نخ

راه اندازی یک پروژه جدید Next.js

دستور زیر را در ترمینال خود اجرا کنید:

npx create-next-app@latest next-hello-world

با چندین گزینه از شما خواسته می شود. در اینجا گزینه های پیشنهادی برای پروژه ما آورده شده است:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes (recommended for UI development)
Would you like to use `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to customize the default import alias (@/*)? › No

این گزینه ها یک پروژه مدرن بعدی را ایجاد می کنند.

• نسخه برای ایمنی نوع
• Eslint برای کیفیت کد
• Tailwind CSS برای یک ظاهر طراحی شده
• روتر برنامه (سیستم مسیریابی جدیدتر ، توصیه شده)

به پروژه خود بروید

cd next-hello-world

نصب وابستگی های اضافی (اختیاری)

ممکن است بخواهید برخی از وابستگی های مشترک را اضافه کنید:

npm install axios react-hook-form zod @hookform/resolvers

سرور توسعه را شروع کنید

npm run dev

بازدید http://localhost:3000 برای دیدن برنامه خود در حال اجرا.

2. ایجاد یک مخزن جدید git خصوصی

در GitHub

1. به GitHub بروید و وارد شوید
2. روی دکمه “+” در گوشه بالا سمت راست کلیک کرده و “مخزن جدید” را انتخاب کنید
3. نام مخزن: next-hello-world
4. توضیحات: شرح مختصری از پروژه خود را اضافه کنید
5. “خصوصی” را انتخاب کنید
6. با readme ، .gitignore یا مجوز شروع نکنید (ما کد موجود خود را فشار خواهیم داد)
7. روی “ایجاد مخزن” کلیک کنید

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

3. تنظیم پیکربندی GIT برای این پروژه

GIT را در پروژه خود آغاز کنید

ابتدا مطمئن شوید که در فهرست پروژه خود هستید:

cd path/to/next-hello-world

اولیه سازی git:

git init

اطلاعات کاربر را فقط برای این پروژه پیکربندی کنید

نام و ایمیل خود را برای این مخزن خاص تنظیم کنید:

git config user.name "Your Name"
git config user.email "your.email@example.com"

یادداشت: این پیکربندی را فقط برای این مخزن تعیین می کند. اگر نیاز به استفاده از حساب های مختلف برای پروژه های مختلف دارید ، این رویکرد تضمین می کند که از هویت صحیح استفاده می شود.

پیکربندی خود را تأیید کنید

بررسی کنید که تنظیمات شما به درستی اعمال شده است:

git config user.name
git config user.email

مخزن از راه دور را اضافه کنید

مخزن محلی خود را به راه دور که ایجاد کرده اید وصل کنید:

git remote add origin https://github.com/username/next-hello-world.git

تعویض کردن username با نام کاربری یا نام سازمانی خود.

از راه دور تأیید کنید

بررسی کنید که از راه دور به درستی اضافه شده است:

git remote -v

شما باید URL مخزن خود را برای هر دو Fetch و Push ذکر کنید.

4. برای اولین بار کد محلی خود را در GIT بارگذاری کنید

یک پرونده .gitignore ایجاد کنید

next.js ایجاد می کند .gitignore به طور خودکار پرونده ، اما تأیید کنید که وجود دارد و حاوی ورودی های مناسب است:

cat .gitignore

در صورت لزوم ، آن را با: ایجاد یا به روز کنید:

# Dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# Testing
/coverage

# Next.js
/.next/
/out/
/.swc/
next-env.d.ts

# Production
/build
/dist

# Misc
.DS_Store
*.pem

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Local env files
.env*.local
.env
.env.development
.env.test
.env.production

# Vercel
.vercel

# TypeScript
*.tsbuildinfo

# IDE specific files
/.idea
# VSCode (ignore all except for recommended extensions and settings)
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
*.sublime-*
*.code-workspace

# Cache
.eslintcache
.stylelintcache

# Optional: if using Storybook
/storybook-static

# Optional: for SASS
.sass-cache/

# PWA
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js.map

پرونده های خود را صحنه کنید

تمام پرونده های پروژه خود را به منطقه صحنه اضافه کنید:

git add .

تعهد اولیه را ایجاد کنید

پرونده های خود را با یک پیام توصیفی انجام دهید:

git commit -m "Initial commit: Next.js TypeScript project setup"

فشار به مخزن از راه دور

کد خود را به مخزن از راه دور فشار دهید:

git push -u origin main

یادداشت: اگر شعبه پیش فرض شما نامگذاری شده است master به جای main، استفاده کنید git push -u origin master در عوض

در صورت عدم موفقیت فشار

اگر فشار شما رد شد زیرا مخزن از راه دور دارای محتوایی است که شما به صورت محلی ندارید ، می توانید از آنها استفاده کنید:

git config pull.rebase false
git pull origin main --allow-unrelated-histories

هرگونه درگیری را حل کنید ، تغییرات را مرتکب شوید و دوباره فشار دهید:

git push -u origin main

5. مراحل بعدی

اکنون که پروژه شما تنظیم شده و به GIT وصل شده است ، در اینجا مراحل بعدی آورده شده است:

استراتژی شاخه

برای کار مداوم یک شاخه توسعه ایجاد کنید:

git checkout -b development
git push -u origin development

درخواست ها

هنگام کار با یک تیم ، از درخواست های کشش برای ادغام تغییرات استفاده کنید:

1. در یک شاخه ویژگی تغییراتی ایجاد کنید
2. شاخه را به سمت Github فشار دهید
3. یک درخواست کشش برای ادغام در توسعه ایجاد کنید
4. پس از بررسی ، برای تولید اصلی ادغام شوید