初めてのNext.js 開発: 公式チュートリアルを進める[Memo for neko]


公式チュートリアルを参考に

対象:すごーく初めての方
基本的には、Next.jsのチュートリアル英語版→日本語にして、さらに簡略化したメモです。
こちらを参考に、Next.jsのことを少しでも知ってもらえるキッカケになれば・・・
・参考URL:Next.js サイト:https://nextjs.org/
(基本的に上記の英語サイトを参考)

==環境==
・PC:Macbook Pro (Retina)
・macOS Big Sur

==今回の流れ(簡略)==
1. Next.jsのサイトへアクセス(https://nextjs.org/)
2. ”Start Learning”(学習スタート)ボタンからスタート
3. ”Create a Next.js App”(Next.jsを作成)ではじめにスタート

1.Next.jsのサイト

・Next.js サイト:https://nextjs.org/
(ここに全てのってます、英語で・・・)

2.”Start Learning”ボタンからスタート


青いボタン"Start Learning"をポチッと

3.”Create a Next.js App”で、はじめにスタート

まずは、Next.jsとは:

”Next.js: The React Framework” Next.jsは、リアクトのフレームワーク

(本当は、いい事いっぱい書いているのだけど、気になる人は公式サイトへ)

次に、必要な環境は
・Node.jsのバージョンは10.13かそれ以上
・お気に入りのテキストエディッタとターミナル系のアプリ

準備ができたら、スタート!
1.ターミナル開いて、以下唱える

terminal
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

2.nextjs-blogというディレクトリができているので、そちらへ移動(以下唱える)

terminal
cd nextjs-blog

3.立ち上げるために、以下唱える(Next.jsを立ち上げるための言葉)

terminal
npm run dev

4.確認のために、お気に入りのブラウザに、以下唱える

ローカルホストを開ける: http://localhost:3000

完成(ぱちぱち!)

補足(編集してみましょう):
・Next.js のサーバを立ち上げたままにしてください(npm run dev)
・pages/index.js を開きましょう
・h1タグの中の “Welcome to” を “Learn” に変えてみましょう
(保存を忘れずに)

編集完了

次は、ページ間の移動です。