概要オープンソースで提供されるReactベースのフロントエンドフレームワーク。Reactでの開発に必要な機能(SSRやルーティングなど)をあらかじめ備えている。next-appでプロジェクト生成可能。--tsオプションでtypescript追加。(--typescriptでも可)プロジェクト名を聞かれるので、好きな名前を設定。--tsその後、下記でデフォルトページ表示可能。className="button">{title}</button>};ただ、componentsでimportしようとすると怒られる。src/components/partials/Button.tsx_app.*tsxでimportするといける。グローバル管理になってしまうため、コンポーネントベースという思想とは合わなそう。あとはtsxファイル内に書いてしまうか。こちらの方がまだマシ。しこれも推奨されないとのこと。style={style}>{title}</button>};つまりReactのプロジェクトで各ページのスタイリングに素のCSSを使うことはほとんどないと思われる。(グローバルに当てたいスタイルは上記で記述する。ModulesNext.jsのビルドインサポート。className={style.button}>{title}</button>};古い技術で、css-loaderでdeprecatedになりそうらしい。今の所Next.jsビルドインサポートしているし、問題はなさそう。emotionあたりが有名。試しにstyled-componentsを使ってみる。ModulesがNext.jsのビルドインサポートなのはいろいろ理由があるらしい。ページの追加ルーティングNext.jsでは、pagesフォルダ配下のディレクトリ構造がそのままページURLになる。Post;リンクNext.jsではaタグの利用は非推奨で、Linkコンポーネントを使う。Linkコンポーネントを使えば、クライアントサイドで遷移ができる。aタグを使うと、毎回フロントサーバにリクエストを投げることになる。splittingNext.jsではあるページにアクセスした場合、そのページに必要なコードのみがロードされる。それによってページの独立性が保たれ、速度も上がる。そのページ上にLinkタグがある場合、その先のページのロードをバックグラウンドで行う。そのため、ページ遷移自体はクライアント側で実施され、高速な遷移を実現できるらしい。素のHTMLなんかをおいても大丈夫。ImageコンポーネントNext.jsには画像関連をいろいろと最適化してくれるImageコンポーネントがある。スクリーンサイズごとの最適化WebPなどの最新フォーマットのサポートなどなど詳細はこちら。engineerバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。