Erstellen Sie eine Website mit dem nächsten JS und stellen Sie sie mit Vercel bereit.

Membina dan menggunakan tapak web dengan Next.js adalah lebih mudah daripada yang anda fikirkan, dan bahagian yang terbaik? Ia adalah platform-agnostik, jadi langkahnya kekal sama sama ada menggunakan macOS, Windows atau Linux. Dalam panduan ini, saya akan membimbing anda membuat apl Next.js, menyediakannya secara setempat dan mengaturnya ke Vercel dengan hanya beberapa arahan mudah.

• 1. Sediakan Projek Next.js Anda Mulakan dengan membuat apl Next.js baharu. Buka terminal anda, dan jalankan arahan berikut:

npx create-next-app@latest my-website
-- Click yes for all dependencies

Ini akan mencipta projek Next.js baharu dalam folder yang dipanggil my-website. Apabila digesa, klik "Ya" untuk memasang semua kebergantungan yang diperlukan.

Seterusnya, navigasi ke folder projek anda:

 cd my-website

• 2. Pastikan Nod Dipasang Jika anda menghadapi sebarang isu semasa menyediakan projek anda, ia mungkin disebabkan oleh versi Node.js yang sudah lapuk. Untuk membetulkannya, anda boleh memasang versi terkini Node:

nvm install node --latest-npm

Pastikan anda memasang versi Node.js yang betul dengan menyemak panduan pemasangan Next.js untuk keperluan versi terkini.

• 3. Buka Fail Projek Setelah projek disediakan, buka folder projek anda dalam editor kod pilihan anda. Anda sepatutnya melihat struktur fail yang serupa dengan yang di bawah:

Perhatikan bahawa nama apl yang saya gunakan di sini ialah portfolio2.0, tetapi sila namakan projek anda apa sahaja yang anda suka. Jika anda mahukan butiran lanjut tentang fail ini, lihat dokumentasi Struktur Projek Next.js.

• 4. Pasang Ketergantungan Seterusnya, pasangkan kebergantungan yang diperlukan:

npm install

Selepas pemasangan, anda boleh menjalankan apl anda secara setempat untuk melihatnya dalam tindakan. Pergi ke http://localhost:3000 dalam penyemak imbas anda, dan anda akan melihat halaman lalai Next.js!
.

• 5.Tekan Kod ke GitHub

Sekarang apl anda disediakan secara setempat, tolak kod ke repositori GitHub anda. Anda memerlukan ini untuk mengerahkannya ke Vercel.

• 6.Kerahkan ke Vercel

• Daftar untuk Vercel:
  Jika anda tidak mempunyai akaun Vercel, daftar di vercel.com. Anda boleh menggunakan akaun GitHub anda untuk penyepaduan yang mudah.

• Sambungkan Vercel ke GitHub:
  Setelah log masuk ke Vercel, pautkan akaun GitHub anda ke papan pemuka Vercel anda.

• Import Repositori GitHub Anda:
  Klik "Projek Baharu" dalam papan pemuka Vercel anda.
  Pilih "Import Git Repository" dan pilih repositori yang mengandungi projek Next.js anda.

• Konfigurieren Sie das Projekt:
  Vercel erkennt automatisch, dass Ihr Projekt mit Next.js erstellt wurde.
  Setzen Sie den Build-Befehl auf den nächsten Build.
  Legen Sie das Ausgabeverzeichnis auf .next fest (dies wird normalerweise automatisch konfiguriert).
  Fügen Sie alle Umgebungsvariablen hinzu, die Sie möglicherweise benötigen (optional).

• Stellen Sie Ihr Projekt bereit:
  Klicken Sie auf „Bereitstellen“ und Vercel startet den Bereitstellungsprozess.
  Vercel klont Ihr Repository, installiert die Abhängigkeiten, erstellt Ihre App und stellt sie bereit.

• Warten Sie, bis die Bereitstellung abgeschlossen ist:
  Vercel stellt Bereitstellungsprotokolle in Echtzeit bereit, damit Sie den Prozess verfolgen können.

• Zugriff auf Ihre Live-Site:
  Sobald die Bereitstellung abgeschlossen ist, erhalten Sie einen Link zu Ihrer Website, der wie folgt aussieht: Ihr-Projektname.vercel.app. Das ist es! Ihre Next.js-App ist jetzt live.

Kurze Zusammenfassung: Schritte für jedes Next.js-Projekt

Bereiten Sie Ihr Next.js-Projekt vor:
Stellen Sie sicher, dass sich Ihr Projekt in einem GitHub-Repository mit einer package.json-Datei befindet, die die erforderlichen Skripte enthält (nächster Entwickler, nächster Build, nächster Start).

Melden Sie sich für Vercel an:
Gehen Sie zur Website von Vercel und melden Sie sich mit Ihrem GitHub-Konto an.

Vercel mit GitHub verbinden:
Verknüpfen Sie Ihr GitHub-Konto im Vercel-Dashboard.

Importieren Sie Ihr GitHub-Repository:
Klicken Sie im Vercel-Dashboard auf „Neues Projekt“ und wählen Sie Ihr GitHub-Repository aus.

Konfigurieren Sie Ihr Projekt:
Vercel erkennt Next.js-Projekte automatisch und konfiguriert die meisten Einstellungen. Bei Bedarf können Sie die Einstellungen verfeinern.

Bereitstellen:
Klicken Sie auf „Bereitstellen“ und überlassen Sie Vercel den Rest. Ihre App wird automatisch erstellt und bereitgestellt.

Warten Sie auf die Bereitstellung:
Sie können die Bereitstellungsprotokolle in Echtzeit überwachen.

Überprüfen Sie Ihre Live-Site:
Sobald die Bereitstellung abgeschlossen ist, erhalten Sie von Vercel eine URL für den Zugriff auf Ihre Website.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website mit dem nächsten JS und stellen Sie sie mit Vercel bereit.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!