NEXT.js> NEXT.最初のステップ

1774 ワード


次のインストール

[LOCAL]
$npm init
$ npm install next react react-dom
基本的なReact関連の開発環境を設定した.(webpackを含む)

package:jsを変更します.
devは開発サーバです.
WebPackはポートを提供しており、基本的な機能は3000回です.だから.
「dev」:「next dev-p 3001」には3001ポートが入力されます.
「dev」:WiFi(next dev-p 3001-h 0.0.0.0など)を使用している場合は、スマートフォンで検証できます.
nextにも独自のサーバがあります.だから.
nextサーバを実行するコマンド
lintは、すべてのコードが同じルールを使用することを許可します.

indexを含むpagesというフォルダを作成します.jsxファイルを作成します.
const Homepage =()=>{
    return(
        <>
        hello Next.js
        </>
    )
}

export default Homepage
次のように記入します.
[local]
$npm run dev

ということで.
localhost:3001に入ると、次のように動作していることがわかります.

次の便利さ
1.ルータ機能は、ファイルを1つ作成するだけで実現できます.
aboutファイルを作成します.
[about.jsx]
const about =()=>{
    return(
        <>
            hello about
        </>
    )
}
export default about
では、アドレス欄にhttp://localhost:3001/about表示と書くと、次のような結果になります.

このようにルータ機能を容易に実現することができる.