# プロジェクト基盤構築とNext.js環境設定 ## お知らせ私、サクサクは [goukaku.ai](https://goukaku.ai) という受験合格向けサービスをリリースします！ぜひXでの拡散、αリリースへの応募よろしくお願いします！ ![goukaku,ai αリリース申込開始](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/f7dc3c4b-8cd5-45cf-88bc-574208c0a415/d28aa10f-e950-417a-bd18-7beeba7a9440.jpg) ## 概要 AI学習プラットフォーム「goukaku.ai」のプロジェクト立ち上げ時に行った、技術基盤の構築過程を詳しく解説します。Next.js 15の最新機能を活用し、スケーラブルでメンテナンスしやすいアーキテクチャを構築しました。実際の開発現場で得た知見と、つまずいたポイントも含めて紹介します。 ## 専門用語解説このプロジェクトで使用している主要な技術について解説します。 ### Next.js 15とは Next.js 15は、Reactベースのフルスタックフレームワークです。サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）の両方に対応しており、SEOに優れたWebアプリケーションを構築できます。従来のReactアプリケーションと比較して、初期表示が高速で、検索エンジンにもインデックスされやすいという特徴があります。 ### App Routerとは App Routerは、Next.js 13以降で導入された新しいルーティングシステムです。従来のPages Routerと異なり、ファイルベースでページを管理でき、より直感的な開発が可能になります。特に複雑なアプリケーションにおいて、レイアウトの共有や階層的なローディング状態の管理が簡単になります。 ### Turbopackとは TurbopackはRustで書かれた高速バンドラーで、従来のWebpackと比較して約10倍高速とされています。開発サーバーの起動時間やホットリロードの速度が大幅に改善されるため、開発効率が向上します。 ### その他の主要技術 | 技術 | 概要 | 採用理由 | |------|------|----------| | **Tailwind CSS** | ユーティリティファーストのCSSフレームワーク | 迅速なプロトタイピングと一貫したデザイン | | **TypeScript** | 静的型付けを追加したJavaScript | コンパイル時エラー検出による品質向上 | | **Server Components** | サーバーサイドでレンダリングされるコンポーネント | 初期ロード時間の短縮とSEO向上 | ## 実装した機能プロジェクト基盤として以下の要素を構築しました。プロジェクトの基盤として、まずモダンな開発環境の構築から始めました。Next.js 15とTurbopackを組み合わせることで、従来よりも大幅に高速な開発体験を実現できています。アーキテクチャ面では、App Routerを使用したスケーラブルな設計を採用しました。コンポーネント指向の開発により、将来的な機能拡張にも対応しやすい構造になっています。 UI基盤にはTailwind CSSを導入し、レスポンシブデザインに対応したデザインシステムを構築しました。TypeScriptによる型安全性の確保も重要な要素として取り入れています。認証システムについてはSupabaseを使用した基盤を作成し、ランディングページも合わせて実装しました。 ## 技術選定の検討過程プロジェクト立ち上げ時に検討した技術の比較表です。実際の選定理由と共に記載します。 ### フレームワーク選定 | 項目 | Next.js 15 | Remix | SvelteKit | Nuxt.js | |------|------------|-------|-----------|---------| | **学習コスト** | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ | | **パフォーマンス** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | **エコシステム** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | | **開発体験** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | **採用理由** | 豊富な実績とTurbopack | - | - | - | ### CSSフレームワーク選定 | 項目 | Tailwind CSS | Emotion | styled-components | CSS Modules | |------|--------------|---------|-------------------|-------------| | **学習コスト** | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | | **ファイルサイズ** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | | **開発速度** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | | **カスタマイズ性** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | | **採用理由** | 高速プロトタイピング | - | - | - | ## 技術スタックこのプロジェクトでは以下の技術を組み合わせて使用しています。 Next.js 15をメインフレームワークとして採用し、TypeScriptで型安全性を確保しました。スタイリングにはTailwind CSSを選択し、アイコンにはLucide Reactを使用しています。また、AI機能の統合には@ai-sdk/openaiを、数式表示にはKaTeXを導入しました。 ## 実装内容 ### 1. プロジェクト初期設定 #### Next.js 15とApp Routerの採用 ```json { "name": "goukaku-ai", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "15.0.3", "react": "^18.3.1", "react-dom": "^18.3.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "typescript": "^5" } } ``` Next.js 15では特にTurbopack開発サーバーによる高速ビルド機能が印象的でした。従来のWebpackと比較して体感できるレベルで速度が向上しています。App Routerによるファイルベースルーティングも直感的で、ディレクトリ構造がそのままURLに反映される点が気に入っています。 Server Componentsとストリーミング対応により、初期ローディング時間の短縮も実現できました。TypeScript統合も以前より改善されており、型推論がより正確になっている印象です。 ### 2. Tailwind CSS統合とデザインシステム #### Tailwind CSS設定 ```javascript // tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', }, secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))', }, }, spacing: { '18': '4.5rem', '88': '22rem', }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, }, }, plugins: [], } ``` #### レスポンシブデザインの基盤 ```css /* globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; } } @layer components { .container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } .btn-primary { @apply bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md transition-colors; } .card { @apply bg-background border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm; } } ``` ### 3. ランディングページの実装 #### モダンなHeroSectionの構築 ```typescript // components/features/landing/HeroSection.tsx import { Button } from '@/components/ui/button' import { ArrowRight, BookOpen, Target } from 'lucide-react' export default function HeroSection() { return (

AIと一緒に学ぶ数学の世界

数検準2級合格を目指す、パーソナライズされた学習体験を提供します。 AIがあなたの学習をサポートします。

1000+ 練習問題

個別最適化

🧮

) } ``` #### 機能紹介セクション ```typescript // components/features/landing/FeaturesSection.tsx import { Brain, LineChart, Users, Zap } from 'lucide-react' const features = [ { icon: Brain, title: 'AI個別指導', description: 'あなたの理解度に合わせてAIが最適な問題を出題し、効率的な学習をサポートします。' }, { icon: LineChart, title: '学習進捗可視化', description: '詳細な分析により、得意分野と苦手分野を明確に把握できます。' }, { icon: Zap, title: '即座のフィードバック', description: '解答後すぐに詳しい解説が表示され、理解を深めることができます。' }, { icon: Users, title: 'コミュニティ学習', description: '他の学習者との交流を通じて、モチベーションを維持できます。' } ] export default function FeaturesSection() { return (

学習を加速する機能

AIテクノロジーを活用した革新的な学習体験をお届けします

{features.map((feature, index) => { const Icon = feature.icon return (

{feature.title}

{feature.description}

) })}

) } ``` ### 4. 認証システムの基盤 #### 認証コンテキストの実装 ```typescript // lib/auth/auth-context.tsx 'use client' import { createContext, useContext, useEffect, useState } from 'react' import { User } from '@supabase/supabase-js' import { supabase } from '@/lib/supabase' interface AuthContextType { user: User | null loading: boolean signIn: (email: string, password: string) => Promise signUp: (email: string, password: string) => Promise signOut: () => Promise } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // 初期セッションの取得 const getInitialSession = async () => { const { data: { session } } = await supabase.auth.getSession() setUser(session?.user ?? null) setLoading(false) } getInitialSession() // 認証状態の変化を監視 const { data: { subscription } } = supabase.auth.onAuthStateChange( async (event, session) => { setUser(session?.user ?? null) setLoading(false) } ) return () => subscription.unsubscribe() }, []) const signIn = async (email: string, password: string) => { const { error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) throw error } const signUp = async (email: string, password: string) => { const { error } = await supabase.auth.signUp({ email, password, }) if (error) throw error } const signOut = async () => { const { error } = await supabase.auth.signOut() if (error) throw error } return ( {children} ) } export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider') } return context } ``` ### 5. 初期コンポーネントの実装 #### 共通UIコンポーネント ```typescript // components/ui/button.tsx import { cn } from '@/lib/utils' import { ButtonHTMLAttributes, forwardRef } from 'react' interface ButtonProps extends ButtonHTMLAttributes { variant?: 'default' | 'outline' | 'ghost' | 'destructive' size?: 'default' | 'sm' | 'lg' } const Button = forwardRef( ({ className, variant = 'default', size = 'default', ...props }, ref) => { const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' const variants = { default: 'bg-primary text-primary-foreground hover:bg-primary/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', ghost: 'hover:bg-accent hover:text-accent-foreground', destructive: 'bg-red-500 text-white hover:bg-red-600', } const sizes = { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', } return (

AIと一緒に学ぶ 数学の世界

学習を加速する機能

{feature.title}

AIと一緒に学ぶ数学の世界

goukaku.ai開発日誌1 プロジェクト基盤構築とNext.js環境設定