工作と競馬2

電子工作、プログラミング、木工といった工作の記録記事、競馬に関する考察記事を掲載するブログ

トップ > 技術メモ > Next.jsアプリ基礎 自分用メモ

Next.jsアプリ基礎 自分用メモ

技術メモ 技術メモ#Webアプリケーション

環境

  • Node.js
  • Visual Studio Code
    • ES7+ React/Redux/React-Native snippets
    • Prettier - Code formatter
    • Tailwind CSS IntelliSense


プロジェクトの作成

npx create-next-app@14

srcディレクトリを作成するように変更。その他はデフォルト。App Routerを使用。

Need to install the following packages:
create-next-app@14.2.6
Ok to proceed? (y)

√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes       
√ Would you like to customize the default import alias (@/*)? ... No / Yes

フォルダができたので、お試しで起動する。

cd my-app
npm run dev

http://localhost:3000にアクセス。


ルーティング

基本的なルーティング

appディレクトリの構造に従ってルーティングさせる。ディレクトリで構造を作成し、page.tsxを配置する。page.tsxという名前にする必要がある。

src/app/
  page.tsx --- /
  task/
    page.tsx ---/task
    edit/
      page.tsx --- /task/edit

コンポーネントは、export defaultをつける。export const ...ではだめ。

const TaskPage = () => {
  return (
    <div>Task Page</div>
  )
}

export default TaskPage


動的ルーティング

URLのパスを動的に作成させるには、角カッコ [] を使う。

src/app/
  task/
    edit/
      [id]/ --- /task/edit/{id}でアクセスできる
        page.tsx

パスをパラメータとして受け取れる。パス名idとパラメータ名は合わせる必要がある。

const TaskEditPage = ({ params }: { params: { id: string } }) => {
  return <div>{params.id}</div>;
};

export default TaskEditPage;

共通レイアウト

layout.tsxをディレクトリ内に配置することで、同階層および配下ディレクトリに共通で適用できる。









サーバーコンポーネントとクライアントコンポーネント



    

  • Next.js v13.4以降はデフォルト
    • 

  • メリット



    • 

  • デメリット


      

    • クライアントコンポーネントでしか使えない機能は使えない


        

      • useState、useEffectなどのHooks
        • 

      • onClickなどのイベント
        • 

      • 初回描画以降はクライアント側処理の方が速い場合もある
        • 

      

      • 

    

    • 

  • うまく併用するべき



    • 





クライアントコンポーネントを使う



Next.js v13.4以降では、すべてのコンポーネントはサーバーコンポーネントなので、クライアントコンポーネントとして使いたい場合は、先頭に、'use client';を追加する。



'use client';

const ClientComponent = () => {
  return <div></div>;
}









バックエンドAPI



appディレクトリ構造を利用して、バックエンドAPIを定義できる。



ページとAPIを分けるために、apiディレクトリを作るのを推奨。route.jsという



src/app/
  api/
    tasks/
      route.ts --- ファイル名はroute.tsとする必要がある





ルートハンドラーの作り方



メソッド名の関数を作成する。同じAPIパスのファイル内にメソッドそれぞれを定義してよい。



export const GET = async () => {
  // 処理
  return NextResponse.json(オブジェクト);
}

export const POST = async () => {
}




データの更新頻度高いアプリケーション



ルートハンドラーは、デフォルトではビルド時にレスポンスが確定する。



データの更新頻度高いアプリケーションでは、以下のオプションを付加して、リクエストごとにレスポンスを構築するようにする。



export const dynamic = 'force-dynamic';





ルートハンドラーの呼び出し方



バックエンドAPIを使うには、fetch関数を使えばよい。



const getTasks = async () => {
  cosnt response = await fetch('http://localhost:3000/api/tasks', {method: 'GET'});

}