b.0218.jp

This repository contains the source code for b.0218.jp, a Japanese-focused blog built with Next.js, React 19, and TypeScript. Article data is stored in a separate repository and loaded through a submodule.

Technologies used

Core

• Next.js 16.x (App Router)
• React 19.x
• TypeScript
• Panda CSS - CSS-in-JS styling system

Development

• Biome - Fast linter and formatter
• Vitest - Unit testing framework
• Playwright - Screenshot generation for OG images

Features

• ML-Powered Recommendations: Article similarity analysis using Japanese morphological analysis (kuromoji)
• Analytics Integration: Google Analytics with popular articles tracking
• OG Image Generation: Automated Open Graph image generation using Playwright
• Static Generation: Pre-built article data for optimal performance

Article data is managed in a separate repository and loaded via submodule.

Preparing for development

Before you begin development, make sure to prepare the .env file with the following contents:

# Required for consistent timestamps
TZ=Asia/Tokyo

# Google Analytics (required for popular articles feature)
GOOGLE_SERVICE_ACCOUNT_CLIENT_EMAIL="your-service-account@project.iam.gserviceaccount.com"
GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
GA_PROPERTY_ID="123456789"
NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

You need to run prebuild to process markdown files, generate article data, and create OG images:

npm run prebuild

Note: If you have run npm run build beforehand, you do not need to run npm run prebuild.

Development

Start development server

The development server runs with Next.js experimental HTTPS feature (--experimental-https) on port 8080:

npm run dev

Access at: https://localhost:8080 (HTTPS only, self-signed certificate by Next.js)

Testing

# Run all tests
npm test

# Run tests with coverage
npm run coverage

Linting

# Check code with Biome
npm run lint

# Auto-fix with Biome
npm run lint:write

# Lint CSS
npm run lint:css

# Lint markup (HTML/JSX)
npm run lint:markup

Production build

To execute the Next.js build for production:

npm run prebuild  # Required: process articles and generate assets
npm run build     # Build the application

Bundle analysis

To analyze the production bundle size:

npm run build:analyzer

---

Repository Stats