Next.js-静的ファイルサービング

Next.jsでは、画像のような静的ページを配置することで非常に簡単に提供できます public、トップレベルのディレクトリ。これらのファイルは、のページと同様の方法で参照できます。pages ディレクトリ。

Next.jsでは、ページはReactコンポーネントであり、pagesディレクトリからエクスポートされます。各ページは、ファイル名に基づいてルートに関連付けられています。

Pagesの章で使用されているnextjsプロジェクトを更新しましょう。

パブリックディレクトリを作成し、その中に画像を配置します。ロゴ.png、TutorialsPointロゴ画像を撮影しました。

first.jsを次のように更新します-

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

ここでは、index.jsファイルにlogo.pngへの参照を追加しました。

Next.jsサーバーを起動します

次のコマンドを実行してサーバーを起動します-。

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

出力を確認する

ブラウザでlocalhost:3000を開くと、次の出力が表示されます。

パブリックディレクトリは、SEOの目的の場合にも役立ちます。これは、robot.txt、Googleサイトの検証、またはWebアプリケーション内のその他の静的アセットに使用できます。