[初心者向け] Next.jsの革新的な「appディレクトリ」でプロジェクトを始めよう

はじめに

Next.jsはバージョン13で大きなアップデートを迎え、「appディレクトリ」という新しいファイル構造が導入されました。この新構造は、従来の「pagesディレクトリ」を進化させ、より柔軟なルーティングとレイアウト管理を可能にします。この記事では、この新しいディレクトリ構造を用いて、Next.jsプロジェクトのセットアップからデプロイまでのプロセスを解説します。

必要な環境

開発を始める前に、Node.jsがインストールされていることを確認してください。Node.jsは公式サイトからダウンロードできます。また、コードの編集にはVisual Studio CodeのようなIDEが推奨されます。

プロジェクトのセットアップ

npx create-next-app@latest example-project

1. TypeScript：JavaScriptに型システムを加えた言語で、コードの安全性を高め、バグの早期検出に役立つ。また開発過程での自動補完やコードのリファクタリングが容易になる。

3. ESLint：より読みやすく、保守しやすいコードを書くことが促される。

4. Tailwind CSS：予め定義されたクラスを利用して迅速にスタイリングを施すことができる。

5. src/ directory：特に大規模なプロジェクト向け。

6. App Router：これはNext.jsが提供する新しいルーターで、より宣言的で直感的なルーティングが可能になる。

7. alias：エイリアスを使用すると、ディレクトリ構造が複雑になっても、より簡潔で読みやすいインポート文を書くことができる。

作成したプロジェクトに入る

cd example-project

開発サーバーを起動する

下記のようにpackage.jsonを修正するとページが自動的に出るので便利です。

package.json

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
-   "dev": "next dev",
+   "dev": "http://localhost:3000 & next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.4"
  }
}

下記コマンドを実行する。

npm run dev

ローカルホストの3000番でホストされています。

まとめ

「appディレクトリ」を使用することで、Next.jsのプロジェクトはさらにモジュラーで管理しやすくなります。この新しいアプローチを利用して、より効率的かつ効果的なWebアプリケーションを開発しましょう。更に学ぶためには、Next.jsの公式ドキュメントを参照してください。