GitHub পেজে আপনার Next.js অ্যাপ প্রকাশ করা উচিত

সম্প্রতি আমি আমার 2048 গেমের ওপেন সোর্স সংস্করণকে নতুন করে সাজিয়েছি এবং এটিকে Next.js এবং React 18-এ স্থানান্তর করার সিদ্ধান্ত নিয়েছি। বিদ্যমান গেমটি কোনো কাস্টম ডোমেইন ছাড়াই GitHub পেজে প্রকাশ করা হয়েছে। আমি ভার্সেলে মোতায়েন করার কথা ভাবছিলাম কিন্তু এটি Google থেকে অর্গানিক ট্র্যাফিক হারাবে যা গত 3 বছরে তৈরি হয়েছিল। এর মানে হল আমাকে গিটহাব পৃষ্ঠাগুলিতে স্থাপনার সাথে পরীক্ষা করার প্রয়োজন ছিল এবং আজ আমি যা শিখেছি তা শেয়ার করব।

আপনি যদি পুরো নিবন্ধটি পড়ার আগে শেষ ফলাফল দেখতে চান তবে আপনি পারেন এটি এখানে পরীক্ষা করুন .

দ্রুত ভূমিকা

আমি দুটি গিটহাব বৈশিষ্ট্য ব্যবহার করব - গিটহাব অ্যাকশন এবং গিটহাব পেজ। আপনি যদি সেগুলি না শুনে থাকেন তবে আমাকে দ্রুত ব্যাখ্যা করতে দিন:

গিটহাব অ্যাকশনগুলি ছোট ওয়ার্কফ্লোগুলির মতো যা আপনার প্রকল্পগুলিতে কাজ করতে পারে। এটি এমন একজন সাহায্যকারী থাকার মতো যা আপনি যা করতে বলেন তা স্বয়ংক্রিয়ভাবে করে। আপনি পরীক্ষা চালানোর জন্য, গুণমান পরীক্ষা করার জন্য বা আপনার অ্যাপ্লিকেশন তৈরি করতে অ্যাকশন ব্যবহার করতে পারেন। আমার ক্ষেত্রে, আমি স্থাপনার পাইপলাইন স্বয়ংক্রিয় করতে এই ওয়ার্কফ্লো ব্যবহার করেছি।

GitHub পেজ কি? ডেভেলপার এবং ওপেন সোর্স প্রজেক্টের জন্য একটি ওয়েব হোস্টিং বিকল্পের মত তাদের চিন্তা করুন। আপনি আপনার পোর্টফোলিও শেয়ার করতে, আপনার ওপেন সোর্স প্রোজেক্টের ওয়েবসাইট হোস্ট করতে বা আমার মত আপনার পোষা প্রোজেক্ট প্রকাশ করতে GitHub পেজ ব্যবহার করতে পারেন।

এখন শুরু করা যাক.

ধাপ 1 - আপনার সংগ্রহস্থলের জন্য GitHub পৃষ্ঠাগুলি সক্রিয় করুন

আমাদের Next.js অ্যাপ্লিকেশানটি প্রকাশ করতে, আমাকে প্রকল্পের সংগ্রহস্থলের জন্য GitHub পৃষ্ঠাগুলি সক্রিয় করতে হবে। আপনি সেটিংস ট্যাবে খুঁজে পেতে পারেন (নীচের ছবিতে 1), তারপর বাম দিকের মেনু থেকে পৃষ্ঠাগুলি নির্বাচন করুন (2), এবং ড্রপডাউন মেনুটি সন্ধান করুন যা আমাদের স্থাপনার উত্স (3) নির্দিষ্ট করতে দেয়।

এখন আপনাকে GitHub অ্যাকশনে স্থাপনার উৎস পরিবর্তন করতে হবে।

এখন থেকে, আপনার প্রকল্পের একটি উত্সর্গীকৃত পৃষ্ঠা আছে। আপনি শুধুমাত্র সেখানে বিষয়বস্তু প্রকাশ করতে হবে.

ধাপ 2 – Next.js বিল্ড প্রসেস কনফিগার করুন

Next.js অ্যাপটি স্থাপন করার আগে, বিল্ড আউটপুট পরিবর্তন করা গুরুত্বপূর্ণ। ডিফল্টরূপে, Next.js অ্যাপ্লিকেশন চালানোর জন্য Node.js ব্যবহার করে এবং এটি GitHub পৃষ্ঠাগুলির সাথে সামঞ্জস্যপূর্ণ নয়।

GitHub পেজগুলি স্ট্যাটিক ফাইলগুলি হোস্ট করার জন্য ডিজাইন করা হয়েছে, যার মানে আমরা সেখানে শুধুমাত্র HTML, CSS, JavaScript (এবং অন্যান্য স্ট্যাটিক ফাইল) প্রকাশ করতে পারি। তাই আমাদের Next.js-এ স্ট্যাটিক পেজ জেনারেশন সক্ষম করতে হবে।

এটি করার জন্য, আপনি next.config.js ভিতরে export করতে আউটপুট মোড পরিবর্তন করবেন:

 /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig;

এখন next build চালানোর পরে, Next.js আপনার অ্যাপের জন্য স্ট্যাটিক সম্পদ ধারণকারী একটি out ফোল্ডার তৈরি করবে। পরবর্তী ধাপে, আমরা এই ডিরেক্টরিটি নেব এবং এটি GitHub পেজে আপলোড করব।

ধাপ 3 - অনুপস্থিত ছবি ঠিক করুন

পৃষ্ঠাগুলি একটি ডোমেনের একটি উপ-পাথের অধীনে প্রকাশিত হয় এবং একটি উপ-পাথ হিসাবে প্রকল্পের নাম নেয়। বিভ্রান্তিকর? একটি উদাহরণ হিসাবে আমার 2048 গেমের একটি URL-এ একটি লুকিয়ে নেওয়া যাক:

 https://mateuszsokola.github.io/2048-in-react/

Github আমার ব্যবহারকারীর জন্য mateuszsokola (আমার ব্যবহারকারীর নাম) নামে একটি ডেডিকেটেড সাবডোমেন তৈরি করেছে। কিন্তু প্রকল্পটি সাব-পাথের অধীনে প্রকাশিত হয়েছে, যা আমার ক্ষেত্রে /2048-in-react । দুর্ভাগ্যবশত, এটি অনুপস্থিত ছবি এবং শৈলীর সমস্যাগুলির দিকে পরিচালিত করবে৷

ডিফল্টরূপে, Next.js ডোমেনের সমস্ত স্ট্যাটিক সম্পদকে ম্যাপ করে। এর মানে হল favicon.ico ফাইলটি mateuszsokola.github.io/favicon.ico এর পরিবর্তে mateuszsokola.github.io/2048-in-react/favicon.icon এ সমাধান করা হবে।

এটি ঠিক করতে, আমরা next.config.js ফাইলের ভিতরে basePath যোগ করে একটি পাথ প্রিফিক্স সেট আপ করতে পারি:

 /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig;

আমার ক্ষেত্রে, এটি হল /2048-in-react যেহেতু আমার প্রকল্পকে 2048-in-react বলা হয়।
প্রজেক্ট ডিরেক্টরির শুরুতে ( / ) অন্তর্ভুক্ত করতে ভুলবেন না।

ধাপ 4 - Github অ্যাকশন তৈরি করুন

Next.js ডিপ্লয়মেন্ট আর্টিফ্যাক্ট তৈরি করছে যা GitHub পেজে প্রকাশ করা যেতে পারে। এখন তাদের প্রকাশ করার জন্য Github অ্যাকশন সেট আপ করার উপযুক্ত সময়। পুনঃব্যবহারযোগ্যতা প্রচারের জন্য আমি দুটি পৃথক কর্মে স্থাপনার সিদ্ধান্ত নিয়েছি:

setup-node অ্যাকশন Node.js সেট আপ করবে এবং সমস্ত নির্ভরতা ইনস্টল করবে। Node.js সেটআপের জন্য একটি স্বতন্ত্র অ্যাকশন থাকা আমাকে অন্যান্য পাইপলাইনের জন্য এটি পুনরায় ব্যবহার করার অনুমতি দেবে। উদাহরণস্বরূপ, আমার কাছে পাইপলাইন আছে যা চালায় কোড লিন্টার এবং পরীক্ষা . সম্ভবত আপনি একাধিক অ্যাকশনও রাখতে চান।

publish অ্যাকশনটি Next.js আর্টিফ্যাক্ট তৈরি করবে এবং প্রতিবার যখন আমরা main ব্রাঞ্চে কোড মার্জ করব তখন সেগুলি GitHub পেজে প্রকাশ করবে।

আমাকে setup-node অ্যাকশন ব্যাখ্যা করে শুরু করা যাক। এখানে কোড আছে:

 # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci

গুরুত্বপূর্ণ : আপনার প্রকল্পের .github/workflows/setup-node ডিরেক্টরিতে এই ফাইলটি তৈরি করুন। এটি action.yml কল করতে ভুলবেন না।

এই স্নিপেট কি করে?

1. এটি একটি composite ক্রিয়া তৈরি করে। composite অ্যাকশন আপনাকে একক অ্যাকশনে একাধিক ওয়ার্কফ্লো ধাপ বান্ডিল করতে দেয়। যদি এটি পরিষ্কার না হয় তবে আমরা দ্বিতীয় অ্যাকশনে গেলে আপনি এটি বুঝতে পারবেন।

2. এটি Node.js 20 ব্যবহার করে একটি নতুন বিল্ড পরিবেশ তৈরি করে এবং প্রকল্প নির্ভরতা ইনস্টল করে।

এগুলি setup-node অ্যাকশনের সবচেয়ে গুরুত্বপূর্ণ অংশ। এখন, publish অ্যাকশনে যাওয়া যাক:

 # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4

আপনার প্রকল্পের .github/workflows ডিরেক্টরিতে এই ফাইলটি তৈরি করুন। আপনি আপনার পছন্দ মতো ফাইলটির নাম দিতে পারেন – আমি আমার publish.yml বলেছি।

এর মানে কি?

1. প্রতিবার নতুন কোড পুশ করা বা main শাখায় একত্রিত করার সময় এই ক্রিয়াটি ট্রিগার হয়।

2. এটি পরিবেশ সেট আপ করতে setup-node অ্যাকশন ব্যবহার করে। composite অ্যাকশন আমি আগের অ্যাকশনে তৈরি করেছি। এখন আপনি জানেন কিভাবে আপনার composite ক্রিয়াগুলিকে অন্যান্য ক্রিয়াগুলিতে অন্তর্ভুক্ত করতে হয়৷

3. অ্যাকশনের দুটি ধাপ রয়েছে: প্রথম পর্যায়ে, Next.js অ্যাপ তৈরি করা হচ্ছে। দ্বিতীয় পর্যায়ে, প্রথম পর্যায়ের শিল্পকর্মগুলি GitHub পেজে আপলোড করা হয়।

এগুলি স্থাপনার পাইপলাইনের সবচেয়ে গুরুত্বপূর্ণ দিক। সমস্ত গিটহাব পেজ স্থাপনার জন্য সেগুলি অপরিবর্তিত থাকার কারণে আমি অনুমতিগুলি এবং একযোগে সেটআপ এড়িয়ে গিয়েছি।

এখন, কর্ম ব্যবহারের জন্য প্রস্তুত.

কমিট এবং পুশ

আপনার পরিবর্তনগুলি কমিট করার পরে এবং main শাখায় ঠেলে দেওয়ার পরে, GitHub স্বয়ংক্রিয়ভাবে GitHub পৃষ্ঠাগুলিতে স্থাপনার স্পিন আপ করবে।

প্রক্রিয়াটি পরিদর্শন করতে, অ্যাকশন ট্যাবে নেভিগেট করুন (নীচের ছবিতে 1), এবং বাম দিকের মেনু থেকে প্রকাশ-টু-গিথুব-পৃষ্ঠা অ্যাকশন নির্বাচন করুন (2) । আপনি স্ক্রিনে আপনার সমস্ত স্থাপনা দেখতে পাবেন (এগুলিকে ওয়ার্কফ্লো বলা হয়)।

এখন সেই ওয়ার্কফ্লোগুলির মধ্যে প্রথমটি নির্বাচন করুন এবং আপনি একটি দুই-পর্যায়ের স্থাপনা দেখতে পাবেন। স্থাপনার পর্যায়ে, আপনি গিটহাব পৃষ্ঠাগুলিতে আপনার ওয়েবসাইটের একটি লিঙ্ক খুঁজে পেতে পারেন।

উপসংহার

লক্ষ লক্ষ ভিউ সহ ওয়েবসাইট হোস্ট করার জন্য Github পৃষ্ঠাগুলি যথেষ্ট নয়। কিন্তু আপনার পোর্টফোলিও বা আপনার ওপেন সোর্স প্রকল্পের জন্য একটি ওয়েবসাইট হোস্ট করার জন্য এটি একটি নিখুঁত পছন্দ।

আমাদের ওয়েবসাইট যেমন Vercel হোস্ট করার জন্য অনেক বিনামূল্যের বিকল্প আছে, কিন্তু আমি আপনাকে একটি বিকল্প দেখাতে চেয়েছিলাম। গিটহাব পৃষ্ঠাগুলি বিকাশকারীদের জন্য তৈরি করা হয়েছে এবং আমি মনে করি প্রতিটি বিকাশকারীর এটির সাথে পরিচিত হওয়া উচিত।

যদি এই নিবন্ধটি আপনাকে সাহায্য করে তবে দয়া করে এটি আপনার সামাজিক মিডিয়াতে ভাগ করুন।

এবং আপনি কোথায় আপনার আবেদন স্থাপন করবেন? এটা সবসময় Vercel?

প্রতিক্রিয়া 18 এবং Next.js জানুন

আপনি প্রতিক্রিয়া বা Next.js এর সাথে শক্তিশালী বোধ করেন না? Udemy আমার অনলাইন কোর্সে যোগদান করুন! আমি আপনাকে একটি সম্পূর্ণ কার্যকরী 2048 গেম তৈরি করে প্রতিক্রিয়া শুরু করতে সাহায্য করব। আমি বিশ্বাস করি গেম তৈরি করা শেখাকে আরও মজাদার করে তোলে এবং আপনার বন্ধুদের দেখানোর জন্য আপনার কাছে চমৎকার কিছু থাকবে।

👇👇👇👇

🧑‍🎓 যোগ দিন প্রতিক্রিয়া 18 এবং Udemy নেক্সট.js কোর্স - শুধুমাত্র এই সপ্তাহে 80% ছাড়।