Next.js入門
2021/8/14yuiseki.icon
概要
Next.jsを使うと、簡単にJavascriptによるWebアプリケーションの開発ができます
Next.jsはExpress.jsとReact.jsを融合させたWebアプリケーションフレームワークです
React.js
https://ja.reactjs.org/
動的なWebページ構築のための、仮想DOMを使った高速な描画を実現するUIライブラリ
ビルドするためにはNode.jsが必要
UIライブラリなので、
サーバーサイドの機能がない
ルーティングの機能がない
画面が動的に描画されるので
Googleクローラーにインデックスしてもらえなかったりする
Express.js
https://expressjs.com/ja/
RubyにおけるSinatraのような、シンプルなWebアプリケーションフレームワーク
動作させるためにNode.jsが必要
Sinatraに近い非常に薄いWebアプリケーションフレームワークなので
ウェブテンプレートエンジンがない
つまりUIの実装はサポートしていないので別に用意する必要がある
Next.js
https://nextjs.org/
https://nextjs-ja-translation-docs.vercel.app/
React.jsにはサーバーサイドの機能がない、Express.jsにはUIの機能がない、ということでくっつけたもの
単に雑にくっつけただけではなく、非常に高度にうまいことくっつけられている
触ってみれば分かる
デメリット
Next.jsはフルスタックWebアプリケーションフレームワークではない
Next.jsには永続化層(ORM等)がない
prismaやmongooseなどのライブラリを使って、永続化層は自力で頑張る必要がある
理屈はいいからとにかく触ってみよう
Node.jsについてもReact.jsについてもExpress.jsについてもNext.jsについても知識は深堀りすれば無限に学ぶことがあります
しかも信じられないくらいややこしい
ややこしくしている黒幕がいるのではないかという陰謀を疑いたくなる
しかし、Next.jsは別にJavascriptに詳しくなくても使えます
とりあえず触ってみてなにかを実現してみましょう
入門チュートリアル
Next.js入門 1 セットアップと起動
Next.js入門 2 ルーティングの仕組み
Next.js入門 3 getStaticPropsとgetStaticPathsによるSSG
Next.js入門 4 APIルート
Node.jsとかwebpackとかbabelとか、なんかJavascript界隈って異常にややこしくないですか?
Next.jsを使っている限りは何も気にする必要はないはずです、すべて気にせずやっていきましょう
困ったら調べたらええ
異常にややこしいのには歴史上の事情がありますので、気になる場合は以下の記事などを参考に学んでください
reactの基本がnode.jsだと聞いたのですがどういうことですか?書き方が同じということですか?まだ全くの初心者なのでやさしく教えていただけると助かります。 - Quora
Javascript
SpiderMonkey
V8
jQuery
Node.js
npm
Serverside
Express.js
Frontend
Browserify
webpack
仮想DOM
React.js
Vue.js
ECMAScript
Typescript