{"id":27141484,"url":"https://github.com/takunagai/nextjs-website","last_synced_at":"2026-04-11T13:07:09.568Z","repository":{"id":39913571,"uuid":"502939689","full_name":"takunagai/nextjs-website","owner":"takunagai","description":"Learning Next.js and tailwind while building websites.","archived":false,"fork":false,"pushed_at":"2025-02-16T00:28:23.000Z","size":11318,"stargazers_count":1,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-16T01:20:55.039Z","etag":null,"topics":["nextjs","postcss","preline","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-website-lemon.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/takunagai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-13T12:07:37.000Z","updated_at":"2025-02-16T00:28:27.000Z","dependencies_parsed_at":"2023-11-12T02:31:03.310Z","dependency_job_id":"757e3ccf-7106-40de-8d45-74649ef55688","html_url":"https://github.com/takunagai/nextjs-website","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takunagai%2Fnextjs-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takunagai%2Fnextjs-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takunagai%2Fnextjs-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takunagai%2Fnextjs-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/takunagai","download_url":"https://codeload.github.com/takunagai/nextjs-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792902,"owners_count":20996897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","postcss","preline","react","tailwindcss","typescript"],"created_at":"2025-04-08T06:49:38.197Z","updated_at":"2025-12-30T23:05:36.604Z","avatar_url":"https://github.com/takunagai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 習作：Next.js で静的な Web サイトを構築\n\nTypeScript ベースで [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) を 進めながら、Web サイト構築を学習。\n\n[» デモ](https://nextjs-website-lemon.vercel.app/)\n\n## ToDo\n\n* 修正：ページネーション (@etchteam/next-pagination) a タグ重複、表示崩れ\n\n## Dependency\n\n* typescript\n* ESLint, Prettier\n  - prettier-plugin-tailwindcss: クラス名のソート\n  - eslint-plugin-storybook ★★未\n* Storybook ★★未\n* React, Next.js\n* PostCSS\n  - postcss-import: 外部 CSS 読み込み\n  - tailwindcss/nesting: ネストで記述\n  - Tailwind CSS\n  - autoprefixer: ベンダープレフィックス付与\n* Tailwind CSS プラグイン, Preline (UIコンポーネント集)\n  - @tailwindcss/typography: バニラHTMLにスタイリング\n  - @tailwindcss/forms: 基本フォームスタイル(オーバーライド)\n  - @tailwindcss/aspect-ratio: Safari 15 対応\n  - @tailwindcss/line-clamp: 指定行数以降を非表示\n  - preline/plugin: Tailwind UI ライブラリ\n* markdown\n  - remark: Markdown の解析\n  - remark-html: Markdown を HTML にコンパイル\n  - gray-matter: フロントマターを解析\n* Framer Motion: アニメーション\n* next-themes: ダークテーマ用\n* データフェッチ\n  - swr\n* ユーティリティ\n  - date-fns: 日付の操作\n  - classnames: クラス名を条件付きで結合\n* コンポーネント\n  - @etchteam/next-pagination: ページネーション\n  - yet-another-react-lightbox: Lightbox風\n* 素材\n  - @heroicons/react: アイコンフォント\n  - react-icons: アイコンフォント(色んなアイコン内包)\n\n## 設定ファイル\n\n* package.json\n    - 基本情報：プロジェクト名、概要、バージョン、プライベートか\n    - \"dependencies\": 公開用パッケージ\n    - \"devDependencies\": 開発用パッケージ\n    - \"scripts\": node ショートカットコマンド登録\n    - \"browserslist\": 対応ブラウザ指定\n* tsconfig.json\n    - \"target\": \"ES2015\"\n    - \"strict\": true 他、コードで参照\n* .eslintrc.json\n    - 未編集。他に合わせて js にした方が良い？\n* prettier.config.js (コードフォーマッター)\n    - カンマあり、セミコロンなし、タブ幅\n    - 追加：Tailwind 用プラグイン読み込み\n* next.config.js\n    - 追加：URL のホスト名を images.domains 構成に追加\n* postcss.config.js (プラグイン)\n    - postcss-import: @import が使えるように\n    - tailwindcss/nesting: 入れ子で書けるように\n    - tailwindcss: Tailwind CSS をプラグインとして使う\n    - autoprefixer: ベンダープレフィックス自動付加。対応ブラウザは、package.json の\"browserslist\" に指定\n* tailwind.config.js\n    - darkMode: デフォルトの 'media' のままの実装なので不要 → 'class' に変更\n    - theme.container: デフォルトで center に。レスポンシブ余白\n    - extend でデフォルト値を保持しつつ、新しい値を追加\n      + theme.extend: テーマカラー \"primary\", \"secondary\"等を追加。グラデーションも作れる (暫定)\n      + 既存プロパティの再設定でオーバーライド\n    - typography 公式プラグイン設定\n      + Markdown や CMS からフェッチした HTML をよしなにスタイリング。その設定\n    - aspectRatio 公式プラグイン設定\n      + Safari 14 でも aspectRatio に対応してくれる(Safari 14 不要なら、Tailwind デフォルトでサポート)\n      + @tailwindcss/aspect-ratio との競合を避けるため無効化するコードが必要\n    - forms 公式プラグイン(読み込みのみ)\n      + form 要素をユーティリティで簡単にオーバーライドできるようにするフォームスタイルの基本的なリセットを提供\n    - preline (Tailwind 用 UI ライブラリ集)\n    - mode: \"jit\" で Just in Time モードに (例：text-[#926a6a], before:content-['›'])\n    - content で、コンパイルするファイルのパス(パターン)を指定\n\n## ダークテーマの実装\n\n* ダークテーマの状態は、layout.tsx に持たせてある\n    - → Header.tsx → ModeSwicher.tsx (切り替えボタンコンポーネント)\n* デフォルトは color-scheme: normal; (サポートしない→ブラウザデフォルトテーマに)\n* color-scheme(ページ側の主張) \u003e prefers-color-scheme(ユーザー側の主張)\n* デフォルトテーマは \"system\" (デフォルト)\n* html 要素(:root) にダークなら `class=\"dark style=\"color-scheme: dark;\"`、ライトなら `class=\"light style=\"color-scheme: light;\"` が付く\n    - → ダークモードなら、`dark:bg-black` などが有効になる\n\n### 参照\n\n* [color-scheme - CSS - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme)\n* [このページの色をかけた魂の戦い - Zenn](https://zenn.dev/uhyo/articles/css-color-adjustment-1) color-scheme の詳細\n* [Dark Mode - Tailwind CSS](https://tailwindcss.com/docs/dark-mode#basic-usage)\n* [next-themes - npm](https://www.npmjs.com/package/next-themes) Tailwind 用設定の説明もあり\n* [Next.js と Tailwind でモード切替えボタンを作成 - Zenn](https://zenn.dev/taka_shino/articles/a6c176da799c91)\n* [Next.js と tailwind でダークモードを実装する - Qiita](https://qiita.com/10mi8o/items/4be3a69731aed0692e40)\n\nimport { useTheme }\n\n## Documentation\n\n* 準備中\n\n\n\n### 参考にしたサンプル\n\n* [公式：next.js/examples at canary - vercel/next.js](https://github.com/vercel/next.js/tree/canary/examples)\n  * [with-storybook](https://github.com/vercel/next.js/tree/canary/examples/with-storybook)\n  * [with-clerk](https://github.com/vercel/next.js/tree/canary/examples/with-clerk)\n  * [with-next-page-transitions](https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions)\n  * [cms-wordpress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakunagai%2Fnextjs-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftakunagai%2Fnextjs-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakunagai%2Fnextjs-website/lists"}