takunagai / nextjs-website

Learning Next.js and tailwind while building websites.

Hi there ! 🐸

• 🔭 I’m currently studying on createing a website using Next.js.
• 🌱 I’m currently learning React, Next.js, Storybook, jest, CSS, WordPress and more.
• 📒 Achievements - Websites(temporary)
• 🔗 CodePen, JSFiddle, Gist, WordPress, Qiita
• 😄 Pronouns: ながたく(Nagataku), Takuna
• 📫 How to reach me: Twitter

nextjs-website's Issues

ページ遷移時の Fade In/Out アニメーション

1. Next.js + Framer Motion でページ遷移アニメーションを実装する - Qiita
2. ページ間移動時のアニメーションを実装 - NextJS | nju33
3. React custom hooksでフェードインアニメーションを実装する | Keshiwo Tech Blog
4. React で URL props が変わったら fade アニメーションで 背景を変える

• Animating with Framer Motion 〜導入編〜 - ちょっと

ヘッドレス WordPress でブログを実装

ヘッダーのリファクタリング

ModeSwitcher コンポーネントの重複を解決

テスト環境の導入 (Jest)

Streched Link が使えるようにする (Bootstrap のように)

• Stretch links for better UX, tailwindcss - YouTube
• Getting buttons to stretch full screen with Tailwind - Stack Overflow
• クリック可能な範囲を広げるスタイルシートのテクニック - コリス

Tailwind CSS の導入 (2022-04-16)

• Install Tailwind CSS with Next.js - Tailwind CSS
• Next.jsとCSS - Qiita

microCMS と連携し簡易ブログを作る

1. microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ
2. Next.js(SSG)でページネーションを実装してみよう | microCMSブログ

メールフォームの追加

API 経由でメールを送受信できるサービス

• SendGrid 無料版あり (12,000通/月、日本語ドキュメントとサポート)
• MailerSend 無料版あり(12,000通/月、1ドメインのみ)
  • Getting Started
• Postmark 最安$10/月
• 7 Best SendGrid Alternatives & Competitors (Jul 2022)

実装例

• [お問合せフォーム yoko - Notion)
  • nextjs-bulletin-board-app/contact.tsx · yoko - github

github api からデータ取得し表示 (2022-04-16)

• Github からユーザをフェッチする - JavaScript Info
• Basic Features: データ取得 - Next.js

新規プロジェクト作成 (2022-04-16)

• PhpStorm の Next.js プラグインで新規プロジェクト作成

ESLint と Prettier の設定

• Basic Features: ESLint | Next.js デフォルトでバンドルされている eslint-plugin-next が含むルールセットを参照、Prettier と連携する設定も解説
• 【2022年】Next.js + TypeScript + ESLint + Prettier の構成でサクッと環境構築する
• [Next.js version 11.0.0 で ESLint を使うために公式ドキュメントを紐解く](https://zenn.dev/ken505/articles/c049a64f3a2989)

認証機能の導入

TypeScript 化 (2022-04-16)

• 今さら聞けないNext.jsをTypeScript化する方法【2021年4月版】- Zenn
• 公式サンプル：next-learn/basics/typescript-final - github
• 【初心者】React × TypeScript 基本の型定義
• TypeScript で書く Next.js のページコンポーネント ++ Gaji-Laboブログ
• 玖ノ型：約束の地へ｜カタ柱じゃなくてもできる、TypeScript の呼吸
• Next.js の InferGetStaticPropsType が便利
• Next.js getStaticPropsの型の付け方、型定義について - Zenn
• TypeScriptの as って何です？(型アサーションについて) - Qiita
• 型定義：DefinitelyTyped/DefinitelyTyped - github
  • npm install --save-dev @types/react-dom

Storybook の導入

• Next.js 12 で Storybook の設定 - アールエフェクト

Markdown ブログ

• カテゴリ、タグ
• 前後リンク
• etc.

Google Analytics トラッキングコードの設置

パンクズリストがきちんと機能するように

OGP の設置

画面内に入った画像を Fade-in アニメーション

• thebuilder/react-intersection-observer - github
• next/imageでのFade-inアニメーション
• React intersection-observerでrefを複数個所に指定
• Intersection Observer API のパフォーマンス：複数インスタンス vs 共有インスタンス
• IntersectionObserver、複数の要素や発生位置に対応する（実践編）。
• アニメーションを使いまわすための『motion+Slot戦略』- Zenn
• Introduction - Framer for Developers
• FramerMotionを使用してスクロールアニメーションを作成する
• Gatsby Framer-Motionでスクロールでopacityを変更する - ushiyaDevLog
• Animating with Framer Motion 〜導入編〜 - chot
  Reactでお手軽にIntersection Observerを使う
• React scroll animations with Framer Motion - LogRocket Blog

Editor Config の導入

入力のルール設定

• [EditorConfig](https://editorconfig.org/)
• どんなエディタでも EditorConfig を使ってコードの統一性を高める - Qiita

共通の Layout コンポーネントの作成 (2022-04-16)

• Next.js入門（TypeScript版）- webOpixel

幅いっぱいに設定した要素の左右にマージンができないよう調整

基本レイアウトの調整

• 幅調整
• 各種設計

メインメニューのリファクタリング

• ネストしたオブジェクトデータから、メニューを生成？

データベースとの連携

• Supabase, Firebase or Hasura

シンタックスハイライトを追加

• Using Prism.js in a Next.js site
• Next.js markdown のコードブロックを PrismJS でシンタックスハイライト - ibulog
  • レンダリング後に副作用で適用
  • → この通りに実装したけどうまくいかなかった (2022-07-10)
• Next.js の静的サイトに Prism を使ってシンタックスハイライトを当てる
• @hashicorp/platform-code-highlighting - npm