フロントエンド（next.js）フレームワークの習得

next.js基礎

next.jsとは

reactを拡張したフレームワーク。

ルーティングやサーバーサイドの処理が可能（サーバーサイドはやらん！！）

ディレクトリ構造

.
├── README.md
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── src
│   └── app
│       ├── favicon.ico
│       ├── fonts
│       ├── globals.css
│       ├── layout.js
│       └── page.js
└── tailwind.config.js

ルーティングとは

URLの構造のこと

（例）http://nakao-keito.com:8003/top

この場合は/topがルーティンングになります。

next.jsのルーティング

next.jsにはルーティングの手法が二つあります

• Page Router

  • ファイル名がルーティングに

  pages
  ├── index.js # / でアクセス             
  ├── about.js # /about でアクセス   
  ├── blog
  │   ├── index.js # /blog でアクセス
  │   └── [id].js # /blog/{id} でアクセス
  └── contact.js # /contact でアクセス
  

• App Router

  • ディレクトリー名がルーティングに
  • page.jsからのみのアクセス

  app
  ├── layout.js
  ├── page.js # / でアクセス
  ├── about
  │   └──  page.js # /about でアクセス
  ├── blog
  │   ├── page.js # /blog でアクセス 
  │   └── [id]
  │       └── page.js # /blog/{id} でアクセス
  └── contact
  		└── page.js # /contact でアクセス
  

コンポーネントの書き方（page.js）

書き方の注意

• export defaultで返す関数をコンポーネントという
• returnの中身は<div>で囲む

function 関数名() {
  // 処理
    return (
      <div>
        ページコンポーネントです
      </div>
    )
}

export default 関数名;

コンポーネントの呼び出し

// import 任意のコンポーネント名 from コンポーネントファイルのパス
import Comp from "./component/Comp";

function page() {
  return (
    <div>
      // <コンポーネント名></コンポーネント名>
      <Comp></Comp>
    </div>
  )
}

export default Page;