Cara Membangun Arsitektur Proyek Next.js yang Dapat Diskalakan – Beragampengetahuan

Dalam beberapa tahun terakhir, Next.js menjadi semakin populer di ekosistem React. Sekarang kerangka kerja de-facto untuk membangun aplikasi web React.

Popularitas kerangka kerja pengembangan ini sebagian besar disebabkan oleh dukungan kelas satu untuk berbagai alat dan pustaka, gaya dengan Modul CSS, keamanan jenis dengan TypeScript, pengoptimalan gambar, dan banyak lagi.

Fitur-fitur ini dapat membangun aplikasi yang dapat diskalakan jika Anda tahu cara menyusun proyek Next.js Anda secara strategis.

Dalam artikel ini, Anda akan mempelajari cara membuat aplikasi Next.js dari awal yang akan diskalakan tanpa masalah saat proyek Anda berkembang.

Lompat ke depan:

Anda dapat menelusuri proyek akhir di GitHub, atau cukup ikuti seperti yang telah kami buat dalam tutorial ini.

Menyiapkan proyek Next.js

Mari kita mulai dengan menginstal proyek Next.js baru. Di Terminal, yang harus Anda lakukan adalah mengetikkan perintah berikut:

npx create-next-app --typescript nextjs-architecture

Ini akan membuat file bernama nextjs-architecturePastikan Anda memilih --typescript sebagai spanduk. Itu selalu merupakan ide yang baik untuk menggunakan TypeScript dalam aplikasi Next.js Anda, karena ini memberikan keamanan jenis yang lebih baik – sesuatu yang harus Anda miliki saat membuat aplikasi full-stack yang modern dan dapat diskalakan.

Dalam contoh ini, saya menggunakan npm sebagai pengelola paket.Anda bisa menggunakannya yarn/pnpm Sesuai dengan kebutuhan Anda.

Setelah instalasi berhasil, buka nextjs-architecture Jalankan perintah berikut di VS Code atau IDE pilihan Anda:

npm run start

Perintah ini akan memulai server pengembangan lokal Anda nextjs-architectureNext.js menyajikan aplikasinya pada nomor port 3000 secara default.Jadi pergi ke localhost:3000 Lihat apakah kode boilerplate berjalan dengan sukses:

Memastikan kompatibilitas dan stabilitas engine dalam skala besar

Jika Anda membuat aplikasi untuk bekerja, kemungkinan beberapa anggota tim sedang mengerjakan proyek Anda. Jadi, Anda harus memastikan keduanya menggunakan versi Node.js yang sama. Menggunakan versi yang berbeda akan menghasilkan versi paket yang tidak konsisten dan dapat menyebabkan kesalahan di kemudian hari.

Untuk mencegah masalah yang disebabkan oleh ketidakkonsistenan antara versi Node yang berbeda, Anda dapat menambahkan a .nvmrc Buat file di tingkat akar proyek Anda dan tambahkan nomor versi Node.js yang ingin digunakan proyek ini. Dalam hal ini Node telah diatur ke v16:

16.0.0

Anda juga harus mengonfigurasi manajer paket Anda — dalam hal ini npm — untuk secara ketat mengelola penggunaan dependensi oleh anggota tim.Buat file baru bernama npmrc dan tambahkan kode berikut:

engine-strict=true

pergi sekarang package.json file dan tambahkan yang baru key-value pasangan:

"engines": {
    "node": ">=16.0.0",
    "npm": "please-use-npm"
  },

Ini akan memastikan bahwa proyek Anda memerlukan Node.js versi 16 ke atas untuk dijalankan, dan dalam hal ini juga memberlakukan penggunaan npm sebagai manajer paket.Gunakan paket instalasi yarn/pnpm akan melempar kesalahan dalam proyek ini.Jika Anda menggunakan Yarn, Anda dapat menambahkan please-use-yarn alih-alih.

Langkah-langkah ini akan membantu memastikan kompatibilitas dan stabilitas dalam skala besar seiring pertumbuhan dan perubahan proyek Next.js.

Siapkan kontrol versi

Pada titik ini, Anda telah menyiapkan beberapa kode boilerplate dasar dan beberapa konfigurasi untuk Next.js. Sekarang adalah saat yang tepat untuk menambahkan sistem kontrol versi untuk berkolaborasi dengan anggota tim lain dalam proyek ini.

Repositori kontrol versi penting untuk proyek apa pun, tetapi terutama penting untuk proyek yang mengantisipasi perluasan. Pengembang dapat dengan mudah melacak perubahan, mengelola versi proyek, dan kembali ke versi sebelumnya bila diperlukan, mempermudah kolaborasi dengan anggota tim dan memaksimalkan waktu aktif aplikasi.

Kami akan menggunakan GitHub untuk proyek ini, tetapi Anda juga dapat memilih GitLab, Bitbucket, atau platform lain untuk menghosting repositori kontrol versi proyek jika Anda mau.

Pertama, pastikan Anda telah menambahkan kunci GitHub SHA ke mesin lokal Anda.Kemudian, buat repositori kosong di GitHub dan beri nama nextjs-architecture.

Sekarang, buka terminal VS Code Anda dan Dorong perubahan ke repositori kosong ini dengan perintah berikut:

git add .
git commit -m "initial commit"

Untuk komit pertama, Anda mungkin perlu mendorongnya ke repositori jarak jauh seperti ini:

git remote add origin git@github.com:<YOUR_GITHUB_USERNAME>/nextjs-architecture.git
git branch -M main
git push -u origin main

Sebelum Anda mendorong komit Anda, pastikan Anda memilikinya .gitignore File ditambahkan di tingkat akar proyek. Next.js menyediakan kode boilerplate secara default.

ini .gitignore file untuk memastikan folder tertentu seperti node_modules atau file yang berisi kunci keamanan atau variabel lingkungan Anda, jangan secara tidak sengaja terdorong ke repo. Komponen ini dibangun dengan cepat saat aplikasi didorong dan diterapkan ke server hosting di lingkungan produksi.

Setelah Anda menginisialisasi repo kosong, Anda juga dapat menyalin ketiga perintah di atas dari GitHub itu sendiri. Untuk memeriksa apakah perubahan berhasil didorong, buka repositori GitHub Anda dan segarkan halaman. Anda harus dapat melihat perubahan Anda di sana.

Terapkan aturan pemformatan kode

Pemformatan kode sangat penting untuk menjaga konsistensi kode seiring skala proyek. Anda dapat menerapkan serangkaian aturan pemformatan kode yang ketat untuk anggota tim yang mengerjakan proyek yang sama tetapi pada cabang atau modul yang berbeda.

Untuk melakukan ini, pertama, tambahkan eslint ke proyek Anda. Untungnya, dalam kasus kami, Next.js memiliki dukungan bawaan untuk ESLint, jadi yang perlu Anda lakukan hanyalah mengonfigurasinya.

periksa satu .eslintrc.json file di tingkat paling akar proyek.File ini memungkinkan Anda untuk menulis eslint Aturan dalam key-value pair.

Anda dapat memilih dari ratusan aturan dan menambahkan kumpulan aturan sebanyak yang Anda perlukan ke proyek Anda. Misalnya, tambahkan kode berikut ke file:

{
  "extends": ["next", "next/core-web-vitals", "eslint:recommended"],
  "globals": {
    "React": "readonly"
  },
  "rules": {
    "no-unused-vars": "warn"
  }
}

Pada contoh di atas, React Ditambahkan sebagai paket global untuk proyek ini.Dengan melakukan ini, Anda memastikan bahwa React selalu didefinisikan dalam komponen fungsional dan kode JSX, meskipun Anda tidak secara eksplisit menyebutkan import React from 'react' di bagian atas file.

Aturan kedua ditambahkan di sini – no-unused-vars —Peringatkan jika Anda menentukan variabel dalam file yang tidak digunakan di mana pun dalam aplikasi. Aturan ini dapat membantu Anda menghapus deklarasi variabel yang tidak perlu, yang sering terjadi dalam proyek tim.

ESLint melakukan pekerjaan dengan baik, tetapi bahkan lebih hebat bila digabungkan dengan Prettier, menyediakan format pengkodean yang konsisten untuk semua anggota tim di seluruh organisasi.

Anda dapat menginstal prettier Dikemas ke dalam proyek seperti ini:

npm i prettier -D

Setelah diinstal, dua file dibuat di level root – level yang sama dengan file eslintrc.json.File-file ini harus diberi nama .prettierrc Dan .prettierignore.

ini .prettierrc File tersebut akan berisi semua aturan Prettier yang Anda sertakan dalam proyek Anda. Kode berikut menunjukkan beberapa aturan yang dapat ditambahkan sebagai key-value pair JSON:

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

ini .prettierignore file akan berisi nama file dan folder yang tidak Anda inginkan untuk dijalankan dan dianalisis oleh Prettier.Misalnya, Anda tidak pernah ingin masuk node_modules map, dist map, package.json, dan file sejenis lainnya.Oleh karena itu, tambahkan jalur ke file-file ini ke .prettierignore seperti ini:

dist
node_modules
package.json

Sekarang, coba ubah apa pun dalam kode Anda dari tanda kutip tunggal menjadi tanda kutip ganda, seperti yang ditunjukkan pada contoh berikut:

'Hello' => "Hello"

jika kamu lari npm run prettier --write dan semuanya bekerja dengan baik, Anda akan melihat bahwa Prettier telah memformat semua file Anda — tanda kutip ganda menjadi tanda kutip tunggal lagi — karena Anda berada di .prettierrc dokumen.

Akan merepotkan untuk menjalankan perintah ini setiap saat, jadi yang terbaik adalah memasukkannya ke dalam file Anda package.json file sebagai skrip:

 "scripts: {
    "prettier": "prettier --write ."
  }

Sekarang yang harus Anda lakukan adalah masuk npm run prettierAnda juga dapat mengonfigurasi VS Code untuk menjalankan Prettier saat Anda mengklik Cmd + S.

Dengan semua pengaturan ini, sekarang adalah saat yang tepat untuk melakukan perubahan pada repositori Anda. Pastikan untuk mengikuti konvensi penamaan yang tepat saat melakukan perubahan. Komitmen Konvensional menyediakan sumber daya berguna yang dapat Anda ikuti saat menangani konvensi penamaan Git.

Membangun direktori Next.js

Anda sekarang dapat membuat keputusan mendalam tentang cara menyusun kode aplikasi Anda. Secara umum, baik React maupun Next.js tidak memiliki pendapat tentang bagaimana Anda harus menyusun aplikasi Anda. Namun, karena Next.js memiliki perutean berbasis file, Anda harus menyusun aplikasi Anda dengan cara yang serupa.

Anda dapat memulai dengan membuat struktur direktori sebagai berikut:

> pages
> components
> utils
> hooks

ini pages Folder akan bertanggung jawab untuk membuat rute berbasis file di aplikasi ini.

ini components Folder dapat digunakan untuk membuat file komponen berbasis React seperti komponen kartu, slider, tab, dll.

ini utils Folder dapat digunakan untuk berbagai tujuan, seperti instance pustaka yang dapat digunakan kembali, beberapa data dummy, atau fungsi utilitas yang dapat digunakan kembali.

Akhirnya, di hooks folder, Anda dapat membuat React Hooks khusus apa pun yang mungkin Anda perlukan yang tidak dimiliki React di luar kotak.

atur kustom document dokumen

Saat Anda membuat kode boilerplate Next.js, itu digunakan document File yang bertanggung jawab untuk benar-benar menjalankan skrip.Saat aplikasi Anda menjadi lebih kompleks, yang terbaik adalah menimpanya document Gunakan file kustom Anda sendiri document dokumen.

Untuk melakukan ini, cukup buat file bernama _document.tsx — termasuk garis bawah — di bawah Anda pages direktori dan rekatkan kode berikut:

import Document, { Head, Html, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="
          <link rel="preconnect" href=" />
         <link href=" rel="stylesheet"/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

File dokumentasi khusus ini adalah tempat yang baik untuk menyertakan tautan ke file font, tautan ke SDK analitik, atau skrip apa pun yang menurut Anda harus tersedia secara global, mis. <Main /> Dan <NextScript />.

Siapkan tata letak khusus

Jika Anda menggunakan Next.js v13 atau yang lebih baru, Anda sudah memiliki dukungan bawaan untuk file tata letak.Cukup buat file bernama layout.tsx di bawah app folder dan tulis kode berikut:

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
    <Navbar />
        {children}
    <Footer />
    </body>
    </html>
  );
}

File ini ada di atas semua rute Anda, sehingga Anda dapat meletakkan komponen bersama di sana – mis. Navbar atau Footer — yang akan muncul di setiap rute.

Jika Anda masih menggunakan Next.js v12, ada trik yang bisa Anda ikuti untuk membuat struktur layout serupa.

Membuat Layout.tsx file paket children Elemen:

function Layout(){
return (
<div>
  <Navbar />
    {children}
  <Footer />
<div>
)
}

Lalu, impor Layout /> Komponen tingkat root – yaitu index.tsx or _app.tsx — Dalam aplikasi Anda:

<Layout>
  <App />
</Layout>

ini Layout file berperilaku serupa dan mengimpor komponen yang Anda bagikan ke semua rute Anda.

Integrasikan Next.js dengan Buku Cerita

Next.js berpasangan sempurna dengan pustaka Storybook, yang merupakan bagian penting dalam membangun aplikasi web modern. Ini sempurna ketika Anda ingin memvisualisasikan komponen berdasarkan properti dan status yang berbeda.

Dalam proyek ini, Anda dapat menginstal Buku Cerita seperti ini:

npx sb init --builder webpack5

Bergantung pada versi proyek Anda, Anda mungkin juga perlu menginstal webpack 5 sebagai dependensi.

Setelah instalasi berhasil, Anda akan melihat a storybook map dan a stories map.

Sebelum Anda menjalankan cerita Anda, Anda perlu menyesuaikan .eslintrc.json Izinkan untuk membaca Buku Cerita sebagai plugin:

{
  "extends": [
    "plugin:storybook/recommended",
    "next",
    "next/core-web-vitals",
    "eslint:recommended"
  ],
  "globals": {
    "React": "readonly"
  },
  "overrides": [
    {
      "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"]
    }
  ],
  "rules": {
    "no-unused-vars": "warn"
  }
}

Anda mungkin mengalami beberapa masalah umum dengan integrasi Storybook dan Next.js.Anda dapat menambahkan milik Anda package.json file sebagai solusi untuk kesalahan ini:

"resolutions": {
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  }

Tambahkan berikut ini ke main.js di bawah berkas .storybook Foldernya juga:

module.exports = {
  typescript: { reactDocgen: "react-docgen" },
  ...  
}

Terakhir, Anda dapat menambahkan perintah npm ke package.json file untuk menjalankan cerita Anda dengan cepat:

"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"

Jika semuanya sudah benar, Anda sekarang dapat menjalankan cerita dengan berlari npm run storybookPerintah ini akan membuka nomor port 6006, di mana Anda akan melihat cerita demo Anda:

Anda sekarang dapat mulai dari components Folder, dan cerita selanjutnya untuk divisualisasikan. Misalnya:

> components
  > Button
    > Button.tsx
    > Button.stories.tsx
    > button.modules.css

Komponen React ini dapat diuji, divisualisasikan, dan diintegrasikan lebih jauh ke dalam aplikasi Anda pages map.

Terapkan aplikasi Next.js

Dengan semua yang didorong ke GitHub, langkah terakhir adalah menerapkan aplikasi Next.js. Anda dapat memilih penyedia hosting apa pun, tetapi kami akan menggunakan Vercel untuk proyek demo ini karena ini adalah yang paling mudah untuk aplikasi Jamstack.

Daftar ke Vercel dan atur akun Anda sebagai hobi. Pastikan untuk mendaftar dengan akun GitHub tempat Anda mendorong proyek.Setelah selesai, pilih Anda nextjs-architecture Item dari Dasbor Vercel.

Isi semua detail sesuai petunjuk, seperti:

• Nama Proyek: nextjs-architecture
• Membangun perintah: npm run build
• Instal perintah: npm install
• Direktori akar: ./

Anda dapat melihat kode lengkapnya di GitHub.

Kesimpulannya

Anda sekarang telah menyiapkan semuanya di aplikasi Next.js ini, yang dapat dengan mudah diperpanjang seiring dengan perkembangan proyek. Anda bahkan dapat meningkatkan arsitektur ini lebih lanjut dengan menggunakan strategi percabangan Git untuk beberapa tim, lingkungan berbeda untuk pengujian lokal dan produksi, dll.

Karena tim Next.js terus meluncurkan versi yang lebih baik setiap tahun, Anda mungkin akan melihat lebih banyak ide arsitektur web yang menarik.

Posting Bagaimana menyusun arsitektur proyek Next.js yang dapat diskalakan muncul pertama kali di Blog beragampengetahuan.

Dari Blog beragampengetahuan https://ift.tt/Zsvzyhn
Hasilkan $200 seminggu
dengan lebih banyak membaca