Next.js 15 ことはじめ

要約

Next.js 15 をインストールして、必要最低限のファイルを作り稼働させるところまでの流れです。

意見はこのエリアに表示されます

以下が表示される。基本的には全部 Enter で OKだが、「Would you like to customize the import alias」のところを、Yes にしておくとエイリアスが使いやすくなる。

baseUrl と paths を追加。

レスポンシブで便利になるので container の設定をする。レスポンシブ用に screens も追加しておく。

トップページの作成。

public フォルダに logo.png を配置して以下を作成する。その後 components/Header.tsx コンポーネントを作成する。

同じように components/Footer.tsx を作成する。

src/app/css/globals.css を以下に変更する。

ターミナルを分割して開いて、以下を実行する。

src/app/css フォルダ以下に style.scss を作成する。サイト全体で使うスタイルや、Tailwind で対応したくないスタイルを記述するときに使う。

次に src/app/layout.tsx を追加する。

grid min-h-[100lvh] grid-rows-[auto_1fr_auto] を指定することで、コンテンツが無くても、フッターが画面下部に固定される。

app ディレクトリに以下の 3 つのファビコンファイルを入れる。

これらのアイコンファイルを app ディレクトリ内に置くだけで、Next.js が自動的に head タグに適切なメタデータを生成してくれる。

その後、ターミナルで npm run dev を叩き、http://localhost:3000/ にアクセスすると画面が表示されるはず。

Explore More