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

2974 ワード
チュートリアル Beginner 初めて next.js Beginner テキストリンク

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

対象：すごーく初めての方
基本的には、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”　に変えてみましょう
（保存を忘れずに）

編集完了

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