Open5

Next.js の基本についてと、Next.js Tips集📝

Next.js
React
TypeScript
Tips
ピン留めされたアイテム
まさぴょん🐱まさぴょん🐱

Next.js プロジェクト作成📝

yarn create next-app frontend --typescript
# あるいは
npx create-next-app frontend --typescript
まさぴょん🐱まさぴょん🐱

動的にページ移動する

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  const navigate = () => {
    router.push('/next-page')  // ここで指定したパスに遷移します
  }

  return (
    <button onClick={navigate}>Go to Next Page</button>
  )
}
まさぴょん🐱まさぴょん🐱

Next.js での画像表示について

Next.js で public フォルダに配置した画像を表示する方法は以下のようになります。

  1. 画像を public フォルダに置く

  2. Next.js プロジェクトの public ディレクトリ内に、表示したい画像ファイルを配置します。
    例: public/images/sample.jpg

  3. Next.js の public ディレクトリに配置した画像は、自動的に / ルートからアクセス可能になります。

例えば、public/images/sample.jpg にある画像は、URLとしては /images/sample.jpg になります。

<img src="/images/sample.jpg" alt="Sample Image" />

Next.js の Image コンポーネントを使用して最適化する場合 Next.js には組み込みの Image コンポーネントがあり、画像の最適化を行ってくれます。以下のように使います。

import Image from 'next/image';

const MyComponent = () => (
  <div>
    <Image src="/images/sample.jpg" alt="Sample Image" width={500} height={300} />
  </div>
);

export default MyComponent;

注意点:

  • Next.js の Image コンポーネントを使う場合、width と height を指定する必要があります。
  • public フォルダにある画像にアクセスするため、src 属性に /images/sample.jpg のようにパスを指定します。