LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-13

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

対象:すごーく初めての方
基本的には、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"をポチッと
nextjs.png

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

welcome.png]

完成(ぱちぱち!)

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

編集完了

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0