tm nextjs starter
1.0.0
これは、2018 年 8 月時点での、最小限でありながら機能する React スターター キットとデモ アプリです。
Javascript の疲れにうんざりしていて、手早く簡単に始めたい場合は、これを覗いてみてください。最新の SPA React アプリの開発は、これほど簡単なものはありません。
デモ アプリは静的サイトであり、オンデマンドで遅延読み込みされるアドレス指定可能なページがいくつかある基本的な単一ページ アプリです。基本的な CRUD 操作を示します: 1) ムービーの一覧表示、2) ムービーの詳細の表示、3) ムービーの作成/編集、および 4) ムービーの削除。
デモではデータ ストレージにブラウザーの localStorage を使用します。つまり、バックエンドなしで実行されます。ソースには、REST バックエンドへの実際の AJAX 呼び出しを行うモジュールが含まれています。モジュールを有効にしてサーバーを作成するだけで、実際の Web アプリを作成する準備が整います。私は例としてこの単純な映画 API を実装する RESTPie3 Python REST API サーバーを開発しました。
デモ アプリは、最新の Web アプリを作成するために不可欠な機能を提供する、シンプルだが強力な技術スタックで構成されています。それはいくつかの優れたライブラリの肩の上に立っています。
├── /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
ローカル マシンでスターターを実行する方法は次のとおりです。
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run dev次に、ブラウザで http://localhost:3000 を指定します。
依存ファイルのいずれかが変更されると、変更はホットロードされ、即座に表示されるようになります。開発をお楽しみください!
Nextjs は、JavaScript 開発の混沌とした領域に適切な秩序をもたらす優れたフレームワークです。構成とツールを用意することで React 開発の開始が容易になり、最初からコア アプリに集中できるようになります。これは、すべての Web アプリで実際に必要となる、適切に設計された最小限のコア機能を提供します。
Next.js の利点を一言で言うと:
Nextjs は十分に成熟しており、約 2 年前にリリースされており、健全なプラグイン エコシステムを備えています。下地処理にはWebpackを使用します。
Nextjs が将来、さらに優れたものに置き換えられたり統合されたりする可能性は十分にありますが、現時点では試してみる価値のあるいくつかのベスト プラクティスがカプセル化されています。
通常、React アプリの状態管理ソリューションとして最初に使用するのは Redux です。これは利用可能な初期のライブラリの 1 つであり、非常に多くのブログで話題になったため、ほぼ標準の地位を獲得しました。
私は最初に Redux に出会ったときから複雑な感情を抱いていました。私は常に自分で考えて研究するのが好きで、多くの React+Redux コードベースを読み、他のオプションを評価した後、機能的で純粋なパラダイムを持つ Redux は私にとって少し抽象的で過剰設計に感じられると思います。 (さらに、Redux は単に必要のない場所でも使用されます。あまりにも簡単に行き過ぎてしまいます。)
私の意見では、MobX は Redux よりもシンプルで実用的な状態管理ソリューションを提供します。手に取りやすく、理解しやすくなります。必要な定型コードが少なくなります。オブザーバブルと宣言した状態を持っていて、その状態を変更するだけで、すべてのオブザーバーが自動的に更新されます。 MobX は邪魔にならずに動作します。
エンジニアは、Redux がより大規模なアプリと「実際の」アプリのどちらに適しているかについて議論しますが、それは終わりのない戦いです。私の戦略は通常、コードを無駄がなく意地悪に保つことであり、そもそも「大きな」アプリを成長させようとはしません...
Nextjs は、サイト グローバルとページ ローカルの両方の CSS スタイル シートをサポートします。
style jsxタグ内のページ コンポーネントに書き込まれます (たとえば、about.jsx を参照)。このデモでは、最近の Web レイアウト標準である CSS グリッド機能も実験します。 CSS グリッドは、2 次元グリッドを定義するための堅牢な方法を最終的に提供する強力なレイアウト ツールです。それはレイアウトの構築方法を変えるでしょう。 CSS グリッドについてまだ学習したり読んだりしたことがない場合は、2018 年がそれを学ぶ良い機会です。ブラウザのサポートはすでに非常に優れています。それはすぐに主流になるでしょう。
Nextjs を使用して静的サイトを生成する機能は、バックエンド サーバーなしでアプリを実行できるようにする重要なツールです。サイトを GitHub ページ、Netlify、または Amazon S3 にエクスポートできます。 (ただし、Github ページのサイト + リンクのプレフィックスに関するいくつかの注意点を確認してください。)
静的生成のもう 1 つの利点は、バックエンドの言語に関係なく、アプリを任意の REST バックエンドに接続できることです。フロントエンドとバックエンドを明確に分離することで、技術レベル、場合によってはチーム レベルでのモジュール化も実現します。
SEO に関する注意点: 動的データを含むページの静的バージョンをエクスポートするには、next.config.js 構成内のすべてのページをスクリプト化する必要があります。この例を参照してください。
静的サイトを生成するには、次のコマンドを実行します。
$ npm run exportそして、静的ファイルはoutフォルダーに生成されます。
ローカルの www サーバーを介して静的サイトをローカルでテストするには、Python スクリプトをすぐに実行します: (python3 -m http.server)
$ npm run pyserve次に、http://localhost:8000 でサイトをテストします。
ホームページのサイズは適度で、圧縮され gzip 圧縮された約 94KBです。
ブラウザーは合計 6 つのリクエストでホームページをロードし、オンデマンドでロードされる新しいページごとに 1 つの js リクエストを1 回作成します (React では、HTML ではなく JavaScript がすべてであることを思い出してください)。
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(Chrome 拡張機能 Page Size Inspector によるレポート。)
さあ、この React スターターとおそらく私の RESTPie3 Python REST API サーバーも使用して、素晴らしいサービスを構築してください。
フリーランスの仕事が可能かどうかを尋ねるために私に連絡することもできます。
React よりも Vue を好む場合は、これと同じスターターを Vue Nuxtjs でコーディングしました。
MITライセンス
