Unduh tm nextjs starter - tm nextjs starter Unduh kode sumber

tm nextjs starter

Kategori lainnya

1.0.0

Unduh

Ini adalah starter kit dan aplikasi demo React saya yang minimal namun berfungsi pada Agustus 2018.

Jika Anda merasa lelah dengan Javascript, dan ingin memulai dengan cepat dan mudah, intip ini. Mengembangkan aplikasi SPA React modern tidak semudah ini.

DEMO LANGSUNG nextjs.tomicloud.com

Tangkapan layar

Aplikasi demo adalah situs statis, aplikasi satu halaman dasar yang memiliki beberapa halaman beralamat yang lambat dimuat sesuai permintaan. Ini mendemonstrasikan operasi dasar CRUD: 1) membuat daftar film, 2) melihat detail film, 3) membuat/mengedit dan 4) menghapus film.

Demo ini menggunakan penyimpanan lokal browser untuk penyimpanan data, yang berarti demo ini berjalan tanpa backend. Sumber memang berisi modul yang melakukan panggilan AJAX nyata ke backend REST - Anda hanya perlu mengaktifkan modul dan menulis server, dan Anda berada di jalur yang baik untuk memiliki aplikasi web nyata. Saya telah mengembangkan server RESTPie3 Python REST API yang mengimplementasikan API film sederhana ini sebagai contoh.

Blok bangunan

Aplikasi demo terdiri dari tumpukan teknologi sederhana namun kuat yang menyediakan fungsionalitas penting untuk membuat aplikasi web modern. Itu berdiri di pundak beberapa perpustakaan besar:

React adalah perpustakaan Javascript dasar yang digemari dunia
Nextjs adalah kerangka Javascript ringan untuk membangun aplikasi React dengan cepat
MobX adalah perpustakaan manajemen negara yang cepat dan mudah
SASS adalah bahasa ekstensi CSS lama yang masih berfungsi dengan baik
Axios adalah perpustakaan AJAX populer berdasarkan Promises

Pohon sumber

 ├── /components/                # React components used by pages
│   └── /MyHeader.js            # Site header component, just as an example
├── /pages/                     # pages
│   ├── /_app.jsx               # top level layout of the app, loaded once
│   ├── /about.jsx              # about page
│   ├── /index.jsx              # home page, lists movies
│   ├── /moviedetails.jsx       # details page, views a movie
│   └── /movieedit.jsx          # edit page, edits a movie
├── /static/                    # static assets, accessed/exported as is
│   ├── /favicon.ico            # favicon
│   └── /exampledata/
│       └── /movies.json        # sample list of 4 movies - loaded initially
├── /styles/                    # global SASS files
│   └── /layout.sass            # main layout
├── config.js                   # app config, select ajax or localstorage
├── next.config.js              # nextjs configuration, almost empty
├── package-lock.json           # npm something
├── package.json                # list of npm packages required
├── README.md                   # this doc
├── serverapi_ajax.js           # API, talks AJAX to a real backend
├── serverapi_localstorage.js   # API, talks to localStorage
└── store.js                    # data store, managed by MobX

Pembangunan lokal

Berikut cara menjalankan starter di mesin lokal Anda:

$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run dev

Kemudian arahkan browser Anda ke http://localhost:3000.

Ketika salah satu file dependen diubah, perubahan tersebut dimuat secara langsung dan langsung terlihat. Selamat menikmati pengembangnya!

Berikutnya.js

Nextjs adalah kerangka kerja hebat yang membawa jumlah keteraturan yang tepat ke dunia pengembangan Javascript yang kacau balau. Ini memudahkan permulaan pengembangan React dengan mengatur konfigurasi dan peralatan, sehingga Anda dapat fokus pada aplikasi inti sejak awal. Ini menyediakan fungsionalitas inti minimal yang dirancang dengan baik yang secara praktis dibutuhkan oleh semua aplikasi web.

Singkatnya, manfaat Next.js:

Konfigurasi minimum - tidak perlu mengutak-atik konfigurasi webpack atau babel, kecuali Anda mau
Menerapkan struktur pada file sumber - sistem file adalah api
Memuat ulang halaman secara cepat untuk mempercepat pekerjaan pengembangan
Logika perutean SPA bawaan
Pemisahan kode halaman secara otomatis (disediakan oleh Webpack)
Opsi penerapan: ekspor situs statis tanpa server atau jalankan Node.js di backend

Nextjs sudah cukup matang, dirilis sekitar 2 tahun lalu, dan memiliki ekosistem plugin yang sehat. Webpack digunakan untuk pekerjaan dasar.

Sangat mungkin dan kemungkinan besar Nextjs akan diganti atau digabungkan dengan sesuatu yang lebih baik di masa mendatang, tetapi hal ini merangkum beberapa praktik terbaik saat ini yang membuatnya layak untuk dicoba.

Manajemen negara MobX

Redux biasanya menjadi perhentian pertama sebagai solusi manajemen status untuk aplikasi React. Itu adalah salah satu perpustakaan awal yang tersedia, dibicarakan di banyak blog dan dengan demikian hampir memperoleh status standar.

Saya memiliki perasaan campur aduk tentang Redux sejak pertemuan pertama. Saya selalu suka berpikir dan melakukan penelitian sendiri dan setelah membaca banyak basis kode React+Redux, mengevaluasi opsi lain, menurut saya Redux dengan paradigma fungsional dan murninya terasa agak abstrak dan terlalu direkayasa bagi saya. (Ditambah lagi Redux juga digunakan di tempat-tempat yang tidak memerlukannya. Terlalu mudah untuk digunakan secara berlebihan.)

Menurut pendapat saya, MobX menawarkan solusi manajemen negara yang lebih sederhana dan praktis daripada Redux. Lebih mudah untuk mengambil dan memahami. Ini memerlukan lebih sedikit kode boilerplate. Anda memiliki status yang Anda nyatakan dapat diamati, lalu cukup mutasikan status Anda dan semua pengamat diperbarui secara otomatis. MobX berfungsi dan tidak mengganggu.

Para insinyur memang memperdebatkan apakah Redux lebih baik untuk aplikasi yang lebih besar atau untuk aplikasi "nyata", namun ini adalah pertarungan yang tidak pernah berakhir. Strategi saya biasanya adalah menjaga kode saya tetap ramping dan sederhana, bahkan tidak mencoba mengembangkan aplikasi "besar"...

CSS

Nextjs menyediakan dukungan untuk style sheet CSS lokal situs global dan halaman.

Satu file CSS global diproses dan dibuat dari file SASS sumber, lalu ditautkan ke aplikasi dalam HTML dengan tag tautan reguler, dan dimuat satu kali di awal aplikasi. Terbukti, solid dan dengan performa terbaik - Anda tidak perlu memasukkan semua CSS ke dalam JS!
Gaya lokal halaman dimuat sesuai permintaan bersama dengan halaman, dan ditulis dalam komponen halaman di dalam style jsx -tags (lihat about.jsx misalnya).

Dalam demo ini saya juga bereksperimen dengan fungsionalitas grid CSS yang merupakan standar tata letak web terkini. Grid CSS adalah alat tata letak yang kuat yang akhirnya menyediakan cara yang kuat untuk mendefinisikan grid dua dimensi. Ini akan mengubah cara kita membuat tata letak. Jika Anda belum mempelajari atau membaca tentang grid CSS, tahun 2018 adalah saat yang tepat untuk melakukannya. Dukungan browsernya sudah sangat baik. Ini akan segera menjadi arus utama.

Menghasilkan situs statis

Kemampuan untuk menghasilkan situs statis dengan Nextjs adalah alat penting yang memungkinkan menjalankan aplikasi tanpa server backend. Anda dapat mengekspor situs ke halaman GitHub, Netlify, atau Amazon S3. (Tetapi periksa beberapa gotcha dengan awalan situs+tautan dengan halaman Github.)

Keuntungan lain dari generasi statis adalah kemampuan untuk menghubungkan aplikasi dengan backend REST apa pun, apa pun bahasa backendnya. Pemisahan yang bersih antara frontend dan backend juga menyediakan modularisasi di tingkat teknologi dan mungkin di tingkat tim.

Satu catatan tentang SEO: untuk mengekspor versi statis halaman dengan data dinamis, Anda perlu membuat skrip semua halaman dalam konfigurasi next.config.js, lihat contoh ini.

Untuk menghasilkan situs statis, jalankan saja

$ npm run export

Dan file statis akan dibuat di folder out .

Untuk menguji situs statis secara lokal melalui server www lokal, saya segera menjalankan skrip python: (python3 -m http.server)

$ npm run pyserve

Dan kemudian uji situs tersebut di http://localhost:8000.

Ukuran Javascript

Ukuran halaman beranda lumayan, sekitar 94KB diperkecil dan di-gzip .

Browser memuat halaman beranda dengan total 6 permintaan, dan setiap halaman baru yang dimuat sesuai permintaan membuat satu permintaan js satu kali (ingat dengan React, semuanya tentang Javascript, bukan HTML).

Page Size Inspector Report
URL: https://nextjs.tomicloud.com/

REQUEST                                       REQ     BYTES

TOTAL___________________________________________6____94,159

Document________________________________________1_______916
-nextjs.tomicloud.com/                                  916

Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js               1,053
-nextjs.tomicloud.com/_next/.../_app.js               2,506
-nextjs.tomicloud.com/_nex.../_error.js               2,490
-nextjs.tomicloud.com/.../main-6a4a..js              86,787

Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css                 407

(Laporan oleh Inspektur Ukuran Halaman ekstensi Chrome saya.)