Next.jsとWordPressで 初めてのフロントエンジニア体験記。

Transcript

1. Next.jsとWordPressで 初めてのフロントエンジニア体験記。 2021.09.30 ジャムジャム！！Jamstack【初⼼者歓迎LT会】 @minamitakao_web
2. 15年間サラリーマンでキャリアを積み上げ 2021年9⽉独⽴。 #駆け出しの フリーランス コーダー マネージャー Webデザイナー ⾃⼰紹介 Next.jsとWordPressで 初めてのフロントエンジニア体験記。 南貴夫（みなみたかお） ２男‧１⼥のお⽗ちゃんです。⼦供達との時間が⼀番の幸せです。 @minamitakao_web mono_croom mono_croom https://cwt.jp
3. 作ってみてた Next.jsとWordPressで 初めてのフロントエンジニア体験記。 https://cwt.jp Webサイトの採⽤技術に フォーカスしたギャラリーサイト
4. 考えた構成 Next.jsとWordPressで 初めてのフロントエンジニア体験記。 記事中画像など メディアファイル 記事公開をトリガーにビルド レンタル サーバ Amazon S
5. 実装について Next.jsとWordPressで 初めてのフロントエンジニア体験記。 Next.jsのドキュメントに沿って進めば サンプルサイトは簡単に⽴ち上がる！ プレビューモードも実装されたサンプルです。 WordPress側のプレビューボタンのリンク先を変更すればOK。 ただし下書き保存ボタンをクリックされないと GraphQLに反映されないので少し⼯夫は必要。 https://nextjs.org/docs/basic-features/pages https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress Basic Features: Pages | Next.js next.js/examples/cms-wordpress at canary · vercel/next.js
6. 使ったプラグイン Next.jsとWordPressで 初めてのフロントエンジニア体験記。 参考記事：WordPressの画像をS にアップロードしてみた      https://qiita.com/mizuno /items/ ca b f ac b
7. テーマファイル Next.jsとWordPressで 初めてのフロントエンジニア体験記。 最低限必要なファイル3つだけです。 functions.phpでプレビューURLの差し替えとWPGraphQLが返す アイテム数の変更、VercelビルドさせるAPIを叩く処理のみです。 追加予定 1. ページネーション 2. お問合せフォーム
8. お世話になった記事 Next.jsとWordPressで 初めてのフロントエンジニア体験記。 https://nextjs-ja-translation-docs.vercel.app/ Next.js ⽇本語翻訳プロジェクト https://tailwindcss.com/docs/guides/nextjs Install Tailwind CSS with Next.js https://zenn.dev/unemployed/articles/vercel-deployhook VercelのDeploy Hookがとても便利だった。 https://zenn.dev/catnose /articles/c a c Next.jsで動的にXMLサイトマップを⽣成する https://zenn.dev/catnose /articles/c ba e adac Next.jsで動的にRSSフィードを⽣成する https://qiita.com/seya/items/d d ee b f Next.js のプロジェクトにGTMを組み込む⽅法 https://maku.blog/p/ vakw i/ Vercel のウェブサイトに独⾃ドメインを割り当てる
9. ありがとうございました。