nextjs ts

Boilerplate berikutnya

Boilerplate yang bertentangan untuk memulai proyek menggunakan NextJS

Fitur

• ?? 13 berikutnya
• ⚛️ Bereaksi 18
• ? Dokumen dan Aplikasi Kustom
• ⌨️ Ketik keamanan menggunakan naskah dalam mode ketat
• ? Tulis SCSS & Future CSS dengan PostCSS + Preset-ENV
• ? SVG Sprite untuk Ikon
• ? Lint Code Anda dengan Eslint & Stylelint
• ? Lebih cantik untuk gaya kode yang konsisten
• ? Jest + Pustaka Pengujian untuk Tes
• ☝️ Husky + Lint-Stag untuk jaminan kualitas kode
• EditorConfig File untuk indentasi yang konsisten
• ? Redux dengan react-redux dan redux-thunk

Cabang Variasi

Server khusus

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Enzim

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Tidak ada redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Memulai

Sebelum Anda dapat mulai mengembangkan aplikasi luar biasa Anda, Anda perlu menginstal dependensi proyek. Pastikan Anda memiliki node (> = 10.13.0) dan NPM diinstal dan jalankan:

$ npm install

⌨️ Pembangunan

Setelah semua dependensi telah diinstal, Anda dapat memulai pengembangan. Untuk memulai server pengembangan di http: // localhost: 3000 run:

$ npm run dev

? Produksi

Untuk menjalankan aplikasi Anda dalam produksi, pastikan untuk menjalankan build terlebih dahulu:

$ npm run build

Dan kemudian mulai aplikasi Anda dengan nomor port yang disediakan (default ke 3000 jika tidak disediakan):

$ PORT=8080 npm run start

? Statis

Anda dapat mengekspor aplikasi Anda ke situs web statis juga:

npm run export

Ini akan membuat halaman html statis ke ./out

? Linters

Boilerplate menyediakan beberapa linter untuk membantu Anda mengawasi konsistensi kode dan jenis keamanan. Ada tiga linter: satu untuk CSS, satu untuk naskah dan satu untuk keamanan tipe. Anda dapat menggunakan masing -masing secara terpisah menggunakan perintah berikut:

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

Kiat: Untuk mendapatkan hasil maksimal dari linter Anda menginstal plugin (stylelint, tslint) yang sesuai untuk editor atau IDE Anda

Lebih cantik

Prettier membantu Anda untuk menegakkan gaya kode yang konsisten (opini). Jika memungkinkan, Anda dapat memberi tahu editor Anda untuk memformat kode Anda saat Anda menyimpan file. Jika Anda tidak dapat melakukan ini, Anda dapat menjalankan lebih cantik secara manual menggunakan:

$ npm run prettier

? Tes

Anda dapat menulis tes Anda menggunakan Jest dan Enzyme. Anda dapat menjalankan semua tes dengan perintah berikut

$ npm run test

Jika Anda ingin mengikuti pengembangan yang didorong oleh tes, Anda dapat menggunakan:

$ npm run test:dev

Modul

Naskah

Naskah dan Babel sudah dikonfigurasi sebelumnya dengan penyelesaian modul khusus. Ini berarti Anda dapat menggunakan impor absolut dengan ruang nama khusus secara default untuk modul berikut:

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

Secara default jalur ./src/common/css dikonfigurasi sebagai jalur yang disertakan untuk pemuat SCSS kami. Ini berarti Anda dapat mengimpor file folder ini secara langsung tanpa jalur relatif atau absolut:

 @import 'variables' ;
@import 'colors' ;