公式チュートリアルを参考に
対象:すごーく初めての方 基本的には、Next.jsのチュートリアル英語版→日本語にして、さらに簡略化したメモです。 こちらを参考に、Next.jsのことを少しでも知ってもらえるキッカケになれば・・・ ・参考URL:Next.js サイト:https://nextjs.org/ (基本的に上記の英語サイトを参考)==環境==
・PC:Macbook Pro (Retina)
・macOS Big Sur
==今回の流れ(簡略)==
- Next.jsのサイトへアクセス(https://nextjs.org/)
- ”Start Learning”(学習スタート)ボタンからスタート
- ”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.ターミナル開いて、以下唱える
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
2.nextjs-blogというディレクトリができているので、そちらへ移動(以下唱える)
cd nextjs-blog
3.立ち上げるために、以下唱える(Next.jsを立ち上げるための言葉)
npm run dev
4.確認のために、お気に入りのブラウザに、以下唱える
ローカルホストを開ける: http://localhost:3000
![welcome.png]](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F69607%2Fc1fafc3e-6c78-7d32-54d4-4c805e8f9f27.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4653d28791fcbb74ef71b12f91742447)
完成(ぱちぱち!)
補足(編集してみましょう):
・Next.js のサーバを立ち上げたままにしてください(npm run dev)
・pages/index.js を開きましょう
・h1タグの中の “Welcome to” を “Learn” に変えてみましょう
(保存を忘れずに)
編集完了
次は、ページ間の移動です。