This document provides the technical design specification for the Corporate Website Renewal project using Next.js. It defines the modern, scalable architecture leveraging Next.js 14's App Router, server components, and edge runtime capabilities.
--------------------------------------------------------------------------------
This document provides the technical design specification for the Corporate Website Renewal project using Next.js. It defines the modern, scalable architecture leveraging Next.js 14's App Router, server components, and edge runtime capabilities.
本文書は、Next.jsを使用した企業ホームページリニューアルプロジェクトの技術設計仕様を提供します。Next.js 14のApp Router、サーバーコンポーネント、エッジランタイム機能を活用した、モダンでスケーラブルなアーキテクチャを定義します。
Detailed technology choices with specific versions:
┌─────────────────────────────────────────────────────────────────────┐
│ Client Browser │
│ ┌─────────────┐ ┌──────────────┐ ┌─────────────┐ ┌────────────┐│
│ │ Next.js │ │ Tailwind │ │ Framer │ │ React ││
│ │ App Router │ │ CSS │ │ Motion │ │ Hook Form ││
│ └─────────────┘ └──────────────┘ └─────────────┘ └────────────┘│
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────┴───────────┐
│ Vercel Edge │
│ ┌───────────────┐ │
│ │ Middleware │ │
│ │ (Auth, i18n) │ │
│ └───────────────┘ │
└───────────┬───────────┘
│
┌─────────────────────────────────────────────────────────────────────┐
│ Next.js Server Components │
│ ┌─────────────┐ ┌──────────────┐ ┌─────────────┐ ┌────────────┐│
│ │ Pages │ │ API │ │ Server │ │ Static ││
│ │ Routes │ │ Routes │ │ Actions │ │ Generation ││
│ └─────────────┘ └──────────────┘ └─────────────┘ └────────────┘│
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────┴────────────────┐
│ Services │
┌─────────────────────────────────────────────────────────────────────┐
│ ┌─────────────┐ ┌──────────────┐ ┌─────────────┐ ┌────────────┐│
│ │ Contentful │ │ SendGrid │ │ Google │ │ Vercel ││
│ │ CMS │ │ Email │ │ Analytics │ │ Analytics ││
│ └─────────────┘ └──────────────┘ └─────────────┘ └────────────┘│
└─────────────────────────────────────────────────────────────────────┘src/
├── app/ # App Router pages
│ ├── [locale]/ # Internationalization root
│ │ ├── (marketing)/ # Marketing pages group
│ │ │ ├── page.tsx # Homepage
│ │ │ ├── about/
│ │ │ ├── products/
│ │ │ └── services/
│ │ ├── (content)/ # Content pages group
│ │ │ ├── blog/
│ │ │ └── news/
│ │ └── layout.tsx
│ ├── api/ # API routes
│ │ ├── contact/
│ │ └── webhook/
│ └── globals.css
├── components/
│ ├── ui/ # Shadcn/ui components
│ ├── layout/ # Layout components
│ │ ├── header.tsx
│ │ ├── footer.tsx
│ │ └── navigation.tsx
│ ├── features/ # Feature-specific components
│ │ ├── hero/
│ │ ├── contact-form/
│ │ └── product-showcase/
│ └── shared/ # Shared components
├── lib/ # Utility functions
│ ├── contentful.ts # CMS integration
│ ├── analytics.ts # Analytics helpers
│ └── utils.ts # General utilities
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
├── styles/ # Global styles
└── config/ # Configuration files// header.tsx
export function Header({ locale }: { locale: string }) {
// Server component for navigation
// Fetches navigation data from CMS
// Implements responsive design
}
// navigation.tsx
"use client"
export function MobileNavigation() {
// Client component for mobile menu
// Hamburger menu with animations
// Accessibility compliant
}// hero/hero-section.tsx
export async function HeroSection() {
// Server component fetching hero content
// Optimized image loading with next/image
// Lazy loading for below-fold content
}
// contact-form/contact-form.tsx
"use client"
export function ContactForm() {
// Client component with React Hook Form
// Zod validation schemas
// Multi-step form with progress indicator
// File upload support
}export async function POST(request: Request) {
// Validate request body with Zod
// Send email via SendGrid
// Store inquiry in database
// Return confirmation
}export async function POST(request: Request) {
// Validate webhook signature
// Trigger ISR revalidation
// Update cache
}// types/content.ts
interface Page {
id: string
slug: string
title: LocalizedString
description: LocalizedString
content: RichText
seo: SEOMetadata
}
interface BlogPost {
id: string
slug: string
title: LocalizedString
excerpt: LocalizedString
content: RichText
author: Author
publishedAt: Date
categories: Category[]
tags: Tag[]
featuredImage: Asset
}
interface Product {
id: string
name: LocalizedString
description: LocalizedString
features: Feature[]
specifications: Specification[]
media: Asset[]
relatedProducts: Product[]
}
interface LocalizedString {
ja: string
en: string
}// lib/validations/contact.ts
export const contactSchema = z.object({
name: z.string().min(2).max(100),
email: z.string().email(),
company: z.string().optional(),
phone: z.string().optional(),
inquiryType: z.enum(['general', 'product', 'support', 'partnership']),
message: z.string().min(10).max(1000),
attachments: z.array(z.instanceof(File)).max(3).optional(),
consent: z.boolean().refine(val => val === true)
})// Image optimization
import Image from 'next/image'
// Font optimization
import { Inter, Noto_Sans_JP } from 'next/font/google'
// Component code splitting
const DynamicHeroVideo = dynamic(
() => import('@/components/features/hero/hero-video'),
{ loading: () => <VideoSkeleton /> }
)// config/i18n.ts
export const i18n = {
defaultLocale: 'ja',
locales: ['ja', 'en'] as const,
} as const
// middleware.ts
export function middleware(request: NextRequest) {
// Locale detection and routing
// Cookie-based preference storage
}// app/[locale]/layout.tsx
export async function generateMetadata({ params }) {
return {
title: {
default: 'Company Name',
template: '%s | Company Name'
},
description: '...',
openGraph: { ... },
twitter: { ... },
alternates: {
canonical: url,
languages: {
'ja': '/ja',
'en': '/en'
}
}
}
}// next.config.js
const securityHeaders = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'X-XSS-Protection',
value: '1; mode=block'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
},
{
key: 'Content-Security-Policy',
value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
}
]// __tests__/components/contact-form.test.tsx
describe('ContactForm', () => {
it('validates required fields', async () => {
// Test form validation
})
it('submits form data correctly', async () => {
// Test form submission
})
})// e2e/contact-flow.spec.ts
test('complete contact flow', async ({ page }) => {
await page.goto('/contact')
// Test entire user journey
}){
"functions": {
"app/api/contact/route.ts": {
"maxDuration": 10
}
},
"images": {
"domains": ["images.ctfassets.net"]
}
}{
"engines": {
"node": ">=18.17.0",
"pnpm": ">=8.0.0"
}
}--------------------------------------------------------------------------------