Tailwind CSS

Next.js 15 Compatible Multilingual and Dark Mode SSG Template

This article was reviewed by a human for implementation and written by AI. Overview This template is a starting point for web application development that supports static site generation (SSG) with Next.js 15, with built-in multilingual support and dark mode. It combines TypeScript, Tailwind CSS, next-intl, and next-themes. https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ Key Features 1. Static Site Generation (SSG) Full static export with output: 'export' Fast page loading and SEO optimization Reduced hosting costs 2. Internationalization (i18n) Full multilingual support with next-intl Japanese and English support (easy to add more languages) URL-based language switching (/ja/about, /en/about) Type-safe translation keys 3. Dark Mode System-linked dark mode with next-themes Automatic detection of user preferences Smooth theme switching animation Persistent settings via LocalStorage 4. Improved Developer Experience Type safety with TypeScript Efficient styling with Tailwind CSS Code quality management with ESLint Unified component structure Tech Stack { "dependencies": { "next": "^15.4.4", "react": "^19.1.0", "next-intl": "^4.3.4", "next-themes": "^0.4.6", "tailwindcss": "^4.1.11", "@tailwindcss/typography": "^0.5.16" } } Project Structure src/ ├── app/ │ ├── [locale]/ │ │ ├── layout.tsx # Root layout │ │ ├── page.tsx # Home page │ │ ├── about/ # About page │ │ └── example/ # Sample page │ ├── icon.svg # Favicon │ └── sitemap.ts # Sitemap generation ├── components/ │ ├── layout/ # Layout components │ │ ├── Header.tsx │ │ ├── Footer.tsx │ │ ├── PageLayout.tsx │ │ ├── ToggleTheme.tsx │ │ └── ToggleLanguage.tsx │ └── page/ # Page-specific components ├── i18n/ │ └── routing.ts # i18n configuration └── messages/ # Translation files ├── en.json └── ja.json Notable Implementations 1. Static Export Support for sitemap.ts export const dynamic = 'force-static'; export const revalidate = false; export default function sitemap(): MetadataRoute.Sitemap { // Implementation } 2. Unified Page Layout <PageLayout breadcrumbItems={breadcrumbItems} title={t('title')} description={t('description')} > <YourContent /> </PageLayout> 3. Configuration via Environment Variables # .env.example NEXT_PUBLIC_SITE_URL=http://localhost:3000 NEXT_PUBLIC_BASE_PATH= Usage Installation git clone [repository-url] cd nextjs-i18n-themes-ssg-template npm install Development npm run dev Build npm run build Customization Points Adding languages: src/i18n/routing.ts and messages/ directory Adding pages: Create new directories under src/app/[locale]/ Theme customization: tailwind.config.js and global CSS Metadata: generateMetadata function in each page Best Practices Component naming: Use PascalCase Translation keys: Organize with nested structure Type safety: Maximize use of TypeScript types Performance: Cache strategy utilizing static generation Summary This template aims to enable quick construction of static sites optimized for SEO, with built-in internationalization and dark mode features. The goal is to improve developer productivity while providing an excellent experience for end users. ...

July 26, 2025 · Updated: July 26, 2025 · 2 min · Nakamura

Trying aleph-r3f

Overview In the following article, I introduced the Aleph 3D viewer. After further investigation, I also discovered the following repository. https://github.com/aleph-viewer/aleph-r3f It is described as follows, with the key difference being its use of react-three-fiber and shadcn/ui. Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui The annotation features also appeared to be improved, as shown below. In this article as well, I use 3D data of the “Ishibuchi Family Globe” published in the Kikuchi City Digital Archive. ...

December 29, 2024 · Updated: December 29, 2024 · 3 min · Nakamura

Using the Zotero API from Next.js

Overview I looked into how to use the Zotero API from Next.js, so this is a memo. As a result, I created the following application. https://zotero-rouge.vercel.app/ Library I used the following library. https://github.com/tnajdek/zotero-api-client Getting the API Key and Other Information Please refer to the following article. Usage Collection List // app/api/zotero/collections/route.js import { NextResponse } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "../../posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollections( zoteroApiKey: string, zoteroUserId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionsResponse = await myapi.collections().get(); return collectionsResponse.raw; } Specific Collection // app/api/zotero/collection/[id]/route.ts import { NextResponse } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "@/app/api/posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollection( zoteroApiKey: string, zoteroUserId: string, collectionId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionResponse = await myapi.collections(collectionId).get(); return collectionResponse.raw; } List of Items in a Specific Collection // app/api/zotero/collection/[id]/items/route.ts import { NextResponse, NextRequest } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "@/app/api/posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollection( zoteroApiKey: string, zoteroUserId: string, collectionId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionResponse = await myapi .collections(collectionId) .items() .get(); return collectionResponse.raw; References The application is hosted on Vercel, using Vercel Postgres for the database and Prisma as the ORM. The UI was built with Tailwind CSS, using design suggestions from ChatGPT. Auth0 was adopted for authentication. ...

November 1, 2024 · Updated: November 1, 2024 · 2 min · Nakamura