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アプリケーション内のその他の静的アセットに使用できます。