Next.js Uygulaması Nasıl Dağıtılır

Bir Next.js uygulamasını dağıtmak, Next.js web uygulamanızı her yerdeki kullanıcıların etkileşimde bulunabilmesi için internet üzerinden erişilebilir hale getirmeyi içerir.

Çeşitli dağıtım seçenekleri mevcut olsa da Back4app’in Container as a Service (CaaS) platformu çeşitli avantajlar sunar. Bu avantajlar, web uygulamalarını kolay adımlarla dağıtmak isteyen tüm geliştiriciler için cazip bir seçim haline getiriyor.

Bu makalede, bir Next.js uygulaması oluşturacak ve Back4app’in konteynerleştirme hizmetini kullanarak bu uygulamayı nasıl barındırabileceğinizi ve dağıtabileceğinizi öğreneceksiniz.

Önemli Çıkarımlar

• Next.js web uygulamanızı hızlı ve verimli bir şekilde dağıtmak için Container as a Service bulut modelini nasıl kullanacağınızı öğreneceksiniz.

• Next.js’nin kullanıcı deneyimini geliştiren Sunucu Tarafı Oluşturma, Otomatik Kod Bölme, Yerleşik Yönlendirme ve Statik Site Oluşturma gibi güçlü yönlerini keşfedeceksiniz.

• Next.js’nin öğrenme eğrisi, sınırlı ekosistemi, Sunucu Tarafı Oluşturmanın karmaşıklığı ve sınırlı yönlendirme esnekliği gibi potansiyel sınırlamalarını anlayacaksınız.

Next.js Nedir?

Next.js, web uygulamaları oluşturmak için React Kütüphanesi’nin üzerine genişletilmiş açık kaynaklı bir çerçevedir. Next.js ile, ihtiyaçlarınız için performanslı olan sunucu tarafı işlenmiş (SSR) ve statik olarak oluşturulmuş React uygulamalarını rahatlıkla oluşturabilirsiniz.

Vercel (eski adıyla Zeit) tarafından 2016 yılında oluşturulmuştur. Son yıllarda Next.js, kullanım kolaylığı ve güçlü özellikleri nedeniyle çok popülerlik kazanmıştır.

Next.js’nin Avantajları

Next.js, web geliştirme için popüler bir seçim olmasını sağlayan çeşitli avantajlar sunar. Bu avantajlardan bazıları şunlardır:

Sunucu Tarafı Oluşturma

Next.js çerçevesi, web uygulamaları için Sunucu Tarafı Oluşturmayı etkinleştirir. Sunucu Tarafı Oluşturma, sayfaların istemciye HTML olarak gönderilmeden önce sunucuda önceden oluşturulmasını sağlar. Daha iyi arama motoru optimizasyonu (SEO) sağlar.

Sunucu taraflı işleme kullanıldığında, sayfalarınız istemciye gönderilmeden önce sunucuda işlenir ve bu da sayfaların yüklenme sürelerini artırır. Bu, özellikle daha yavaş bağlantılara veya cihazlara sahip kullanıcılar için faydalıdır.

Ayrıca, sunucu tarafı oluşturma, sayfayı oluşturmadan önce API’lerden veya veritabanlarından veri almayı kolaylaştırır.

Otomatik Kod Bölme

Kod bölme, bir JavaScript uygulamasını ve tüm yapı kodunu daha küçük parçalara ayırma tekniğini ifade eder. Next.js, kodu sayfa rotalarına göre otomatik olarak böler.

Next.js’nin otomatik kod bölme özelliği, ilk sayfa yüklemelerinin daha hızlı olmasını sağlar. Ayrıca istemciye gönderilen JavaScript miktarını azaltarak performansı ve kullanıcı deneyimini iyileştirir.

Yerleşik Yönlendirme

Next.js’nin yerleşik yönlendirme sistemi, çerçevenin önemli bir avantajıdır. Yerleşik yönlendirme sistemi ile rotaları tanımlamak ve sayfalar arasında gezinmek kolaydır. Next.js hem istemci tarafı hem de sunucu tarafı yönlendirmeyi destekler.

Bu yönlendirme sistemi dinamik yönlendirme desteği sunarak geliştirici verimliliğini artırır, uygulama performansını iyileştirir ve sorunsuz ve verimli bir kullanıcı deneyimi sunar.

API Rotaları

Next.js uygulamaları, geliştiricilerin doğrudan uygulamaları içinde sunucusuz API uç noktaları oluşturmalarına olanak tanıyan varsayılan API rotaları ile birlikte gelir. API rotaları, Next.js’in web uygulamaları oluşturmak için çeşitli avantajlar sağlayan güçlü bir özelliğidir.

Bu avantajlar arasında geliştiricilerin sunucusuz işlevler oluşturmasına, API uç noktalarını tanımlamasına ve düzenlemesine ve sunucu tarafı işleme sırasında veri almasına olanak tanımak yer alıyor. Rotalar ayrı bir arka uç sunucusuna olan ihtiyacı ortadan kaldırır. Ayrıca REST ve GraphQL API’lerini de desteklerler.

Next.js, API isteklerini verimli bir şekilde işlemek için API rotalarını kullanarak ölçeklenebilir, performanslı ve SEO dostu uygulamalar oluşturmayı kolaylaştırır.

Statik Site Oluşturma

Statik Site Oluşturma, Next.js çerçevesinin önemli bir avantajıdır. Next.js, sayfaları derleme zamanında önceden işlemek ve bunları statik dosyalar olarak sunmak için statik site oluşturmayı kullanır. Bu özellik, her sayfayı HTML dosyalarına önceden işleyerek hızlı sayfa yükleme süreleri sağlar.

Statik siteler son derece SEO dostudur ve daha az saldırı vektörüne sahiptir, bu da onları daha güvenli hale getirir. Next.js tarafından oluşturulan statik siteler, sunucu altyapısını zorlamadan yüksek trafik yüklerini kaldırabildikleri için doğası gereği ölçeklenebilirdir.

Next.js statik siteler için çevrimdışı destek sağlar, böylece kullanıcılar internet bağlantısı olmadan gezinmeye ve daha önce ziyaret edilen sayfalara erişmeye devam edebilir.

Next.js’nin Sınırlamaları

Next.js, sunucu tarafında işlenen React uygulamaları oluşturmak için güçlü ve popüler bir çerçeve olsa da, burada bilmeniz gereken bazı sınırlamalar vardır:

Öğrenme Eğrisi

Next.js, geleneksel React geliştirmeye aşina olmayan ek kavramlar ve kurallar sunar. Next.js ile geliştirmeye geçmek, kendine özgü mimarisini ve özelliklerini anlamak ve bunlara uyum sağlamak için zaman gerektirebilir.

Next.js, proje gereksinimlerine göre özelleştirilebilen bir dizi yapılandırma seçeneği sunar. Araçları, kütüphaneleri ve eklenti seçenekleri ile Next.js ekosistemini tanımak için biraz zaman ayırmalısınız.

Sınırlı Ekosistem

Next.js, React ve Angular gibi yerleşik çerçevelere/kütüphanelere kıyasla nispeten yeni bir çerçevedir. Sonuç olarak, ekosistemi hala büyümekte ve emekleme aşamasındadır. Daha köklü çerçevelerle aynı genişlikte kütüphanelere ve eklentilere sahip değildir.

Topluluk destekli paketlere güvenmeniz veya belirli gereksinimler için özel çözümler oluşturmanız gerekebilir.

Sunucu Tarafı Rendering Karmaşıklığı

Sunucu Tarafı Oluşturma Next.js’nin güçlü bir özelliği olsa da, geliştirme sürecine karmaşıklık da getirebilir.

Çoğunlukla öğrenmesi ve uygulaması çok daha fazla zaman gerektirir. Sunucu Tarafı Oluşturmanın kullanılması, sunucu oluşturma hatalarına veya sunucu ve istemci oluşturma arasında tutarsızlıklara yol açabilir.

Bu oluşturma işlemini uygularken dikkatli olmak en iyisidir. Sunucu ve istemcinin durumlarını senkronize etmesi gerektiğinden, veri getirme ve uygulama durumunu etkili bir şekilde yönetebilmeniz gerekir.

Sınırlı Yönlendirme Esnekliği

Next.js, dosya tabanlı bir yönlendirme yaklaşımı izleyen yerleşik bir yönlendirme sistemine sahiptir. Bu, birçok durumda yönlendirmeyi basitleştirmeyi amaçlar. Ancak, daha gelişmiş yönlendirme kütüphaneleri ile aynı düzeyde esneklik sağlamayabilir.

Yönlendirme davranışını varsayılan kuralların ötesinde özelleştirmek, her zaman uygun olmayan ek geçici çözümler gerektirebilir.

Next.js Dağıtım Seçenekleri

Next.js uygulamaları için Containers as a Service (CaaS) ve Infrastructure as a Service (IaaS) dahil olmak üzere çeşitli dağıtım seçenekleri mevcuttur.

Oluşturduğunuz Next.js uygulamasına en iyi şekilde uyması için bu seçeneklerin ne olduğunu, nasıl çalıştıklarını ve birbirleriyle nasıl karşılaştırıldıklarını bilmelisiniz.

Hizmet Olarak Altyapı (IaaS)

IaaS, internet üzerinden sanallaştırılmış bilgi işlem kaynakları sağlayan bir bulut bilişim modelidir. IaaS kullanırken, geliştiriciler uygulamalarını bir bulut sağlayıcısı tarafından barındırılan sanal makinelere (VM’ler) dağıtabilir ve yönetebilir.

Bir Next.js uygulamasını bir IaaS platformunda dağıtmak, kontrol ve esneklik gibi çeşitli avantajlar sunar. IaaS platformları kullandığın kadar öde programını takip ettikleri için uygun maliyetlidir. Bu, uygulamanızın kullanacağı kaynaklara göre ücretlendirileceğiniz anlamına gelir.

Next.js uygulamalarınızı dağıtmak için kullanabileceğiniz bazı popüler IaaS platformları şunlardır:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Hizmet Olarak Konteyner (CaaS)

CaaS, IaaS platformuna benzer bir bulut bilişim modelidir. Bununla birlikte, bilgi işlem kaynakları sağlamanın yanı sıra, konteynerli uygulamaları dağıtmak ve yönetmek için tamamen yönetilen bir ortam sağlarlar.

Bu, uygulamanın çalıştırılması için çok az yapılandırma ve çalışma yapılması anlamına gelir. Bu aynı zamanda özelleştirmeler üzerinde çok az kontrol olduğu anlamına gelir.

Bir Next.js uygulaması konteyner olarak dağıtılırken uygulama kodu, çalışma zamanı ve bağımlılıklar bir konteyner imajında bir araya getirilir. Bu imaj daha sonra bir CaaS platformunda dağıtılabilir ve çalıştırılabilir.

Next.js uygulamalarınızı dağıtabileceğiniz bazı popüler CaaS platformları şunlardır:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

CaaS platformları dağıtımı basitleştirir. Ayrıca uygulamalarınız için ölçeklenebilirliği, taşınabilirliği ve güvenliği geliştirir. Altyapı yönetimini soyutlar ve yerleşik orkestrasyon ve ölçeklendirme sağlar.

Back4App üzerinde Next.js Uygulaması Oluşturma ve Dağıtma

Bu bölümde, Next.js çerçevesini kullanarak bir web uygulaması oluşturmak ve Back4app konteyner hizmetini kullanarak uygulamayı Back4app platformuna dağıtmak için gerekenleri tartışacağız.

Platformda nasıl gezineceğinizi ve web uygulamanızı Back4app sunucuları üzerinden erişilebilir hale getirmek için konteyner hizmetini nasıl kullanacağınızı öğreneceksiniz. Bu bölümü okuduktan sonra bir Next.js uygulamasını nasıl dağıtacağınızı öğreneceksiniz.

Back4app Konteynerleri Nedir?

Back4app CaaS platformu, size bulut tabanlı bir hizmet modeli sunan, konteynerleri ve uygulamaları yönetmenize ve bu konteynerlere dağıtmanıza olanak tanıyan bir platformdur.

Back4App Containers, uygulamalarınızı çalıştırmak için size esnek, ölçeklenebilir ve güvenli bir ortam sağlayan Back4App platformunun güçlü bir özelliğidir.

Bu konteynerler PHP, Python, Node.js gibi birden fazla programlama dilini destekler. Bazı geliştiriciler bunun harika bir ücretsiz Next.js barındırma platformu olduğunu söylüyor.

Back4app’in konteynerleri taleplerinizi karşılamak için otomatik olarak ölçeklendirilebilir. Her konteyner diğerlerinden izole edilerek uygulamanızın verilerinin korunmasını sağlar. Konteynerler Back4App ekosistemi ile kolayca entegre olur.

Bu, konteynerlerinizi veritabanları ve bulut işlevleri gibi diğer Back4App hizmetlerine bağlamanızı kolaylaştırır.

Proje Tanıtımı

Bu eğitimde Next.js kullanarak temel bir uygulama oluşturacaksınız. Bu uygulama, fetch API’sini kullanarak harici bir API’den rastgele tavsiyeler getirecek. Uygulama daha sonra oluşturacağınız web uygulama arayüzünde tavsiyeleri görüntüleyecektir.

Uygulamayı Back4app üzerinde dağıtmak için Next.js uygulamasını oluşturmayı atlayabilirsiniz. Uygulamanın nihai kaynak kodunu bu GitHub deposunda bulabilirsiniz.

Ön Koşullar

Bu öğreticiyi takip etmek ve Next.js uygulamanızı Back4app’e dağıtmak için aşağıdaki önkoşulları yerine getirmeniz gerekir.

Sahip olduğunuzdan emin olun:

• React kütüphane kavramlarının anlaşılması
• Docker kurulumu da dahil olmak üzere Docker deneyimi
• Node.js ve NPM ile aşinalık
• Bilgisayarınızda Git yüklü ve bir GitHub hesabı.

Next.js Uygulamanızı Kodlama

Next.js uygulamasının iskelesini oluşturmak için node.js terminalinizde aşağıdaki komutu çalıştırın:

npx create-next-app@latest

Yukarıdaki komutu çalıştırdığınızda, terminalinizde bir dizi istem görüntülenecektir. Bu istemler Next.js uygulamanızı yapılandırmanız içindir.

İstemler bu terminal ekran görüntüsüne benzer olacaktır.

Next.js, uygulamanızı hızlı yanıtlarınızla eşleşecek şekilde yapılandırır. Bu uygulamada App Router ve Tailwind CSS’ye ihtiyacınız olmayacak. Bu seçenekler için Hayır ‘ı seçin.

Uygulamanız oluşturulduğunda, arayüzü oluşturmaya başlayın.

İlk olarak, globals.css dosyasına aşağıdaki global stilleri ekleyin:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

globals.css dosyasını src dizininin styles klasöründe bulabilirsiniz. Global stilleri ekledikten sonra bunları uygulamanıza uygulamak için globals.css dosyasını pages dizinindeki _app.tsx dosyanıza aktarın.

globals.css dosyasını _app.tsx dosyasına aktarmadan önce, uygulamanızın düzenini tanımlamak için bir düzen bileşeni oluşturmanız gerekir.

Bunu yapmak için, src dizininde bir bileşen klasörü ve bu klasörün içinde bir Layout.tsx dosyası oluşturun. Layout.tsx dosyasına aşağıdaki kodu yazın:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Yukarıdaki kod bloğu bir Layout bileşeni tanımlar. Layout bileşeninde, Home.module.css dosyasından stillerinizi ve next/font/google modülünden Comforter işlevini içe aktarırsınız.

Comforter işlevini kullanarak comforter yazı tipini yapılandırır ve className prop’unu comforter .className olarak ayarlayarak bunu üstbilginizdeki h1 öğesine uygularsınız.

props.children ifadesi, Layout bileşeninin içindeki alt bileşenleri oluşturacaktır.

Ayrıca Home.module.css dosyasında başlık stilinizi ve diğer gerekli stilleri tanımlamalısınız.

Örneğin:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Şimdi, global.css dosyasını ve Layout bileşenini _app.tsx dosyasına aktarın ve uygulamanızı Layout bileşenine sarın:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Uygulamanızın düzenini tanımladınız. Daha sonra, API’den tavsiyeleri alabilir ve uygulamada görüntüleyebilirsiniz. Bunu yapmak için pages dizinindeki index.tsx dosyasını kullanacaksınız.

index.tsx dosyasında, mevcut kodu aşağıdaki kodla geçersiz kılın:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

Kod bloğu ana sayfayı tanımlar. React kütüphanesini, stil için Home.module.css dosyasını ve Next.js font kütüphanesinden Google fontu Montserrat ‘ı içe aktarır.

useEffect kancası, React bileşenlerinde yan etkiler gerçekleştirmenizi sağlayan güçlü bir araçtır. Bu uygulamada, API’nizden tavsiye almak için useEffect kancasını kullandınız. API’den getirilen tavsiye daha sonra tavsiye durumuna ayarlanır.

useEffect kancası ilk olarak bileşen oluşturulduğunda ve ardından count durumunun değeri her değiştiğinde tekrar çalışacaktır. Bunun nedeni, sayım durumunu bağımlılık dizisinin değeri olarak ayarlamış olmanızdır.

Oluştur düğmesine tıkladığınızda, handleClick işlevi çalışacak ve sayım durumunu 1 artıracaktır. Bu, useEffect kancasının tekrar çalışmasına, API’den yeni tavsiyeler almasına ve tavsiye durumunu güncellemesine neden olur. Oluştur düğmesine her tıkladığınızda, ekranınızda yeni bir tavsiye parçası görüntülenecektir.

Next.js uygulamanız tamamlandı!

Uygulamayı başlatmak için aşağıdaki komutu çalıştırın:

npm run dev

Uygulama yerel sunucunuzda çalışıyor olmalıdır http://localhost:3000.

Oluştur düğmesine tıklandığında yeni bir tavsiye parçası getirilecek ve görüntülenecektir. Ayrıca her seferinde “tavsiye no “yu 1 artıracaktır.

Uygulamayı Dockerize Etme

Next.js uygulamasını Back4app üzerinde dağıtmadan önce, uygulamayı dockerize etmelisiniz. Bir uygulamayı Dockerize etmek, uygulamanızı ve bağımlılıklarını Docker konteynerlerine paketleyecektir.

Docker konteynerleri, uygulamalarınızı gerekli kütüphaneleri ve yapılandırmalarıyla birlikte çalıştırmak için hafif, yalıtılmış ve taşınabilir bir yol sağlar.

Bu, uygulamalarınızı Docker yüklü herhangi bir makineye dağıtmayı kolaylaştırır. Uygulamanızın Docker’laştırılmasıyla basitleştirilmiş dağıtım, gelişmiş taşınabilirlik, ölçeklenebilirlik vb.

Aşağıda Next.js uygulamanızı nasıl dockerize edebileceğinize dair adım adım bir kılavuz yer almaktadır:

Adım 1: Proje kök dizininizde bir Dockerfile oluşturun
Next.js projenizin kök dizininde Dockerfile adında yeni bir dosya oluşturun. Bu dosya, Docker’ın uygulamanızın bir görüntüsünü oluşturması için talimatları içerecektir.

Adım 2: Docker dosyanızı tanımlayın
Dockerfile‘a aşağıdaki kodu girin:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Bu Docker dosyası aşağıdakileri yapar:

• Resmi Node.js 14 çalışma zamanından başlar.
• Çalışma dizinini /app olarak ayarlar.
• package.json ve package-lock.json dosyalarını Docker görüntüsüne kopyalar ve bağımlılıkları yükler.
• Uygulama kodunun geri kalanını Docker görüntüsüne kopyalar.
• Next.js uygulamasını oluşturur.
• Uygulama için 3000 numaralı bağlantı noktasını gösterir.
• Uygulamayı başlatmak için komutu tanımlar.

Bu özellikler uygulamanızın çalışacağı ortamı tanımlar.

Adım 3: Docker görüntüsünü oluşturun

Docker görüntüsünü oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:

docker build -t advice-generator .

“advice-generator” yerine Docker görüntünüze vermek istediğiniz adı yazabilirsiniz.

Docker konteynerini çalıştırın

İmaj oluşturulduktan sonra, aşağıdaki komutla bir konteyner olarak çalıştırabilirsiniz:

docker run -p 3000:3000 advice-generator 

Bu komut, Docker konteynerindeki 3000 numaralı portu makinenizdeki 3000 numaralı portla eşler.

Bu adımları izleyerek Next.js uygulamanızı bir Docker konteynerinde çalıştırabilirsiniz. Uygulamaya web tarayıcınızda http://localhost:3000 adresine giderek erişebilirsiniz.

Next.js Uygulamanızı GitHub’a Gönderme

Uygulamayı dockerize ettikten sonra, uygulamayı bir GitHub deposuna itmeniz gerekir. Uygulamayı bir GitHub deposuna itmek için GitHub hesabınızda yeni bir depo oluşturun ve terminalinizde uygulamanızın dizininde aşağıdaki komutları çalıştırın:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Bu komut, geçerli dizininizde yeni bir Git deposu başlatır.
• git add: Bu komut, geçerli dizininizdeki tüm dosyaları hazırlama alanına ekler.
• git remote add origin : Bu komut yerel deponuzu uzak bir depoya bağlar. Değiştirmek ile uzak deponuzun URL’sini girin.
• git commit -m ‘initial commit’: Bu komut, hazırlık alanında yazılan tüm değişiklikleri alır ve bunları yeni bir commit’te depolar.
• git branch -M main: Bu komut main adında yeni bir dal oluşturur ve ona geçiş yapar.
• git push -u origin main: Bu komut, ana dalınızdaki taahhütlerinizi origin uzak deposuna iter.

Uygulamayı Back4app’e Dağıtın

Uygulamanızı Back4app’e dağıtmak için öncelikle bir Back4app hesabı oluşturmanız gerekir. Bunu yapmak için aşağıdaki adımları izleyin:

1. Back4app’in web sitesini ziyaret edin.
2. “Kaydol” düğmesine tıklayın.
3. Kayıt formunu doldurun ve gönderin.

Zaten kurulu bir Back4app hesabınız varsa, sadece Giriş yapabilir ve bir sonraki adıma geçebilirsiniz.

Bir hesap oluşturduktan sonra hesabınıza giriş yapın ve “Yeni Uygulama “ya tıklayın

düğmesine basın. Bu düğmeyi ekranın sağ üst köşesinde bulabilirsiniz.

Aşağıda gösterilene benzer bir ekranla karşılaşacaksınız.

Uygulamanızı kapsayıcılar kullanarak derlemek ve dağıtmak için Container as a Service seçeneğini belirleyin. Derleme işlemi uzun sürmeyecektir. Bu işlem bittikten sonra GitHub hesabınızı oluşturulan CaaS uygulamasına bağlayın.

Ardından Back4app uygulamasında bağlı GitHub hesabınızdan dağıtmak istediğiniz depoyu seçin.

Artık bir depo seçtiğinize göre, geriye kalan tek şey uygulamayı dağıtmaktır. Bunu yapmadan önce, uygulamayı adlandırmanız ve dağıtımını yapılandırmanız gerekir.

Uygulamanızı dağıtmak için “Uygulama Oluştur” düğmesine tıklayın.

Tebrikler, uygulamanızı Back4app üzerinde başarıyla dağıttınız. Yukarıdaki ekranda Back4app tarafından sağlanan bağlantıya giderek uygulamaya web üzerinden erişebilirsiniz.

Sonuç

Next.js, sunucu tarafı işlenmiş (SSR) React uygulamaları oluşturmak için açık kaynaklı bir çerçevedir. Ayrıca statik site oluşturma, otomatik kod bölme, yerleşik yönlendirme, API rotaları vb. dahil olmak üzere birçok avantaj sunar. Bu avantajlar Next.js’yi güçlü bir çerçeve haline getirir.

Back4pp’in CaaS’ını kullanarak bir Next.js uygulaması dağıtmak, geliştirme sürecini basitleştirir. Back4app CaaS platformu, Next.js uygulamalarını dağıtmak için ölçeklenebilir, güvenli ve uygun maliyetli bir çözümdür.

Kullanıcı dostu arayüzü, gerçek zamanlı güncellemeleri, GraphQL ve REST API desteği, otomatik yedeklemeleri ve sunucusuz ortamı onu geliştiriciler için mükemmel bir seçim haline getiriyor.

SSS