Next.js Uygulamanızı GitHub Sayfalarında Yayınlamalısınız

Yakın zamanda 2048 Game'in açık kaynaklı sürümünü yeniledim ve onu Next.js ve React 18'e taşımaya karar verdim. Mevcut oyun herhangi bir özel alan adı olmadan GitHub Pages'da yayınlandı. Vercel'e dağıtım yapmayı düşünüyordum ancak son 3 yılda Google'dan gelen organik trafiği kaybedecekti. Bu, GitHub Pages'a dağıtımı denemem gerektiği anlamına geliyor ve bugün öğrendiklerimi paylaşacağım.

Yazının tamamını okumadan önce sonucunu görmek istiyorsanız, burayı kontrol et .

Hızlı Giriş

İki GitHub özelliğini kullanacağım – GitHub Eylemleri ve GitHub Sayfaları. Eğer duymadıysanız hemen açıklayayım:

GitHub Eylemleri, projelerinizde görevleri yerine getirebilecek küçük iş akışları gibidir. Bu, yapmasını söylediğiniz şeyleri otomatik olarak yapan bir yardımcının olması gibidir. Testleri çalıştırmak, kalite kontrolleri yapmak veya uygulamanızı oluşturmak için Eylemler'i kullanabilirsiniz. Benim durumumda, dağıtım hattını otomatikleştirmek için bu iş akışlarını kullandım.

GitHub Sayfaları nedir? Bunları geliştiriciler ve açık kaynaklı projeler için bir web barındırma seçeneği olarak düşünün. Portföylerinizi paylaşmak, açık kaynaklı projelerinizin web sitelerini barındırmak veya benimki gibi evcil hayvan projelerinizi yayınlamak için GitHub Sayfalarını kullanabilirsiniz.

Şimdi başlayalım.

Adım 1 – Deponuz için GitHub Sayfalarını Etkinleştirin

Next.js uygulamamızı yayınlamak için projenin deposu için GitHub Sayfalarını etkinleştirmem gerekiyordu. Ayarlar sekmesinde (aşağıdaki resimde 1) bulabilir, ardından sol taraftaki menüden Sayfalar'ı (2) seçebilir ve dağıtım Kaynağını (3) belirtmemize olanak tanıyan açılır menüyü bulabilirsiniz.

Artık dağıtım Kaynağını GitHub Actions olarak değiştirmeniz gerekecek.

Artık projenizin özel bir sayfası var. Orada yalnızca içerik yayınlamanız yeterlidir.

Adım 2 – Next.js Derleme İşlemini Yapılandırın

Next.js uygulamasını dağıtmadan önce derleme çıktısını değiştirmek önemlidir. Next.js, uygulamayı çalıştırmak için varsayılan olarak Node.js'yi kullanır ve bu, GitHub Pages ile uyumlu değildir.

GitHub Sayfaları statik dosyaları barındıracak şekilde tasarlanmıştır; bu, orada yalnızca HTML, CSS, JavaScript (ve diğer statik dosyaları) yayınlayabileceğimiz anlamına gelir. Bu nedenle Next.js'de statik sayfa oluşturmayı etkinleştirmemiz gerekecek.

Bunu yapmak için çıktı modunu next.config.js içinde export şekilde değiştireceksiniz:

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

Artık next build çalıştırdıktan sonra Next.js, uygulamanız için statik varlıkları içeren bir out klasörü oluşturacaktır. Sonraki adımlarda bu dizini alıp GitHub Pages’a yükleyeceğiz.

Adım 3 – Eksik Görselleri Onarın

Sayfalar bir alan adının alt yolu altında yayınlanır ve proje adını alt yol olarak alır. Kafa karıştırıcı? Örnek olarak 2048 oyunumun URL'sine kısa bir göz atalım:

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

Github, kullanıcım için mateuszsokola (kullanıcı adım) adında özel bir alt alan adı oluşturdu. Ancak proje benim durumumda /2048-in-react olan alt yol altında yayınlandı. Ne yazık ki bu, eksik görseller ve stillerle ilgili sorunlara yol açacaktır.

Varsayılan olarak Next.js, etki alanındaki tüm statik varlıkları eşler. Bu, favicon.ico dosyasının mateuszsokola.github.io/favicon.ico yerine mateuszsokola.github.io/2048-in-react/favicon.icon olarak çözümleneceği anlamına gelir.

Bunu düzeltmek için next.config.js dosyasının içine basePath ekleyerek bir yol öneki ayarlayabiliriz:

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

Benim durumumda, projemin adı 2048-in-react olduğu için /2048-in-react .
Proje dizininin başına ( / ) işaretini eklemeyi unutmayın .

Adım 4 – Github Eylemleri Oluşturun

Next.js, GitHub Sayfalarında yayınlanabilecek dağıtım yapıtları üretiyor. Artık bunları yayınlamak için Github Eylemlerini ayarlamanın zamanı geldi. Yeniden kullanılabilirliği teşvik etmek için dağıtımı iki ayrı eyleme ayırmaya karar verdim:

setup-node eylemi, Node.js'yi kuracak ve tüm bağımlılıkları yükleyecektir. Node.js kurulumu için bağımsız bir eyleme sahip olmak, onu diğer işlem hatları için yeniden kullanmama olanak tanıyacak. Örneğin, çalışan boru hatlarım var kod linter Ve testler . Muhtemelen siz de birden fazla eyleme sahip olmak istiyorsunuz.

publish eylemi, Next.js yapıtlarını oluşturacak ve kodu main dalda her birleştirdiğimizde bunları GitHub Sayfalarında yayınlayacaktır.

setup-node eylemini açıklayarak başlayayım. İşte kod:

 # 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

Önemli : Bu dosyayı projenizdeki .github/workflows/setup-node dizininde oluşturun. Bunu action.yml adlandırdığınızdan emin olun.

Bu parçacık ne işe yarıyor?

1. composite bir eylem yaratır. composite eylem, birden fazla iş akışı adımını tek bir eylemde birleştirmenize olanak tanır. Eğer net değilse ikinci aksiyona geçtiğimizde anlayacaksınız.

2. Node.js 20'yi kullanarak yeni bir yapı ortamı oluşturur ve proje bağımlılıklarını yükler.

Bunlar setup-node eyleminin en önemli parçalarıdır. Şimdi publish işlemine geçelim:

 # 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

Bu dosyayı projenizdeki .github/workflows dizininde oluşturun. Dosyayı istediğiniz gibi adlandırabilirsiniz; ben benimkini publish.yml olarak adlandırdım.

Bu ne yapar?

1. Bu eylem, yeni kodun main dala aktarıldığı veya birleştirildiği her seferde tetiklenir.

2. Ortamı ayarlamak için setup-node eylemini kullanır. Önceki eylemde oluşturduğum composite eylem. Artık composite eylemlerinizi diğer eylemlere nasıl dahil edeceğinizi biliyorsunuz.

3. Eylemin iki aşaması var: İlk aşamada Next.js uygulaması oluşturuluyor. İkinci aşamada ise ilk aşamadaki eserler GitHub Sayfalarına yüklenir.

Bunlar dağıtım hattının en önemli yönleridir. Tüm GitHub Sayfaları dağıtımları için değişmeden kaldıkları için izinleri ve eşzamanlılık kurulumunu atladım.

Artık aksiyon kullanıma hazır.

Taahhüt Et ve İt

Değişikliklerinizi main şubeye aktardıktan ve gönderdikten sonra GitHub, dağıtımı GitHub Sayfalarına otomatik olarak hızlandıracaktır.

Süreci incelemek için Eylemler sekmesine gidin (aşağıdaki resimde 1) ve sol taraftaki menüden (2) github sayfalarında yayınla eylemini seçin . Ekranda tüm dağıtımlarınızı göreceksiniz (bunlara iş akışları denir).

Şimdi bu iş akışlarından ilkini seçtiğinizde iki aşamalı bir dağıtım göreceksiniz. Dağıtım aşamasında GitHub Sayfalarında web sitenize giden bir bağlantı bulabilirsiniz.

Çözüm

Milyonlarca görüntülemeye sahip web sitelerini barındırmak için Github Sayfaları yeterli değildir. Ancak açık kaynak projeniz için portföyünüzü veya web sitenizi barındırmak mükemmel bir seçimdir.

Web sitelerimizi barındırmak için Vercel gibi birçok ücretsiz seçenek mevcut ancak ben size bir alternatif göstermek istedim. GitHub Pages, geliştiriciler için tasarlandı ve her geliştiricinin buna aşina olması gerektiğini düşünüyorum.

Bu makale size yardımcı olduysa lütfen sosyal medyanızda paylaşın.

Peki uygulamanızı nerede dağıtacaksınız? Her zaman Vercel mi?

React 18 ve Next.js'yi öğrenin

React veya Next.js ile kendinizi güçlü hissetmiyor musunuz? Udemy'deki çevrimiçi kursuma katılın! Tamamen işlevsel bir 2048 Oyunu oluşturarak React'ı kullanmaya başlamanıza yardımcı olacağım. Oyun oluşturmanın öğrenmeyi daha eğlenceli hale getirdiğine ve arkadaşlarınıza gösterecek harika bir şeyiniz olacağına inanıyorum.

👇👇👇👇

🧑‍🎓 Katıl Udemy'de React 18 ve Next.js kursu – Sadece bu haftaya özel %80 İNDİRİM.