Upgrade to Pro — share decks privately, control downloads, hide ads and more …

_microCMS_を使ってNext.jsアプリ開発しよう_.pdf

techtekt
December 20, 2023
1.5k

 _microCMS_を使ってNext.jsアプリ開発しよう_.pdf

techtekt

December 20, 2023
Tweet

More Decks by techtekt

Transcript

  1. 今日の流れ ハンズオン 1. Next.jsでアプリケーション(with Docker)の作成 2. アプリケーションのTypeScript化 3. microCMSのセットアップ 4.

    アプリケーションにmicroCMSへの通信を実装 5. アプリケーションにニュース一覧ページとニュース詳細ページを実装 デプロイ 1. Docker上での実行 2. DockerイメージをContainer Registryへpush 3. Cloud Runでサービスを作成
  2. サンプルからNext.jsアプリケーションを作ろう next.js/examples/with-docker $ npx create-next-app --example with-docker nextjs-microcms-docker # or

    $ yarn create next-app --example with-docker nextjs-microcms-docker → DockerfileはCloud Runへのデプロイの時に使います
  3. microCMSへの通信を実装しよう(3-1) lib/api.tsを作成する クライアントの作成 import { createClient } from 'microcms-js-sdk'; const

    client = createClient({ serviceDomain: process.env.NEXT_PUBLIC_MICROCMS_API_URL ?? '', apiKey: process.env.NEXT_PUBLIC_MICROCMS_API_KEY ?? '' });
  4. microCMSへの通信を実装しよう(3-3) lib/api.tsを作成する ニュース一覧とニュース詳細を取得 export async function getNewsList(): Promise<News[]> { const

    data = await client.get({ endpoint: 'news' }) return data.contents } export async function getNews(id: string): Promise<News> { const data = await client.get({ endpoint: 'news', contentId: id }) return data }
  5. ニュース一覧ページを実装しよう(2) pages/index.tsを編集する return ( <div className={styles.container}> ... <main className={styles.main}> ...

    <div className={styles.grid}> {newsList.map(news => <Link key={news.id} href={`/news/${news.id}`} className={styles.card}> <h3>{news?.title} &rarr;</h3> <p></p> </Link>) } ...
  6. ニュース詳細ページを実装しよう(1) $ yarn add html-react-parser pages/news/[id].tsxを作成する const [news, setNews] =

    useState<News>(); const router = useRouter(); useEffect(() => { if (router.isReady) { getNews(router.query.id?.toString() ?? '').then((news: News) => { setNews(news) }) } }, [router.isReady]);
  7. microCMSの便利機能 • 画像サイズ ◦ 画像の縦横比調整、切り取りや表示領域の最適化 • クエリパラメータ ◦ limit, offset

    : ページング ◦ q : 全文検索 ◦ fields : 取得する要素の指定 ◦ filters : フィルタ条件
  8. DockerイメージをContainer Registryへpushし ましょう gcloudへログインする $ gcloud auth login $ gcloud

    config set project <project name> Container Registryへpushする $ docker tag nextjs-microcms-docker_app gcr.io/dev- aoki/nextjs-microcms-docker:init $ docker push gcr.io/dev-aoki/nextjs-microcms-docker:init
  9. 新卒採用の職種一覧 ビジネス職 新規事業開発職 企画職 エンジニア職 デザイナー職 データスペシャリスト職 さまざまなエリア・職種に 配属可能性あり 特定のポジション

    確約で配属 リクルーティングアドバイザー キャリアアドバイザー プロジェクトエージェント リクルーティングコンサルタント HiPro Bizコンサルタント 新卒採用人事 サービス企画 プロダクト企画 ITコンサルタント クライアントサクセス エンジニア UI/UXデザイナー データサイエンティスト
  10. 学びの環境 • エンジニアが多様なキャリアを実現できるよう、さまざまな取り組みが 行われています。 学 び • 書籍購入補助 • 資格取得費用補助

    • セミナーや研修費用負担 • 英語学習サポート 社 外 貢 献 • techtekt(テックテクト)での記事執筆 • TECH Street (テックストリート)での登壇 • 各種セミナーでの講演 そ の 他 • 開発用PCいつでも交換OK • 部署によっては最新スペックのMac貸与 • モニター貸与
  11. 勉強会一例 • エンジニア組織だけではなく、デザイナーなど他職種との開催も。 • 新卒社員同士で行っている勉強会もあり〼。 ⚫ プロジェクトの危機を察知するフレームワーク ⚫ QAガイドライン作ったので紹介と簡単な品質講座 ⚫

    Chrome拡張機能作ってSlack便利にしてみた! ⚫ なぜ「サウナイキタイ」は使いやすく美しいのか解剖してみた。 ⚫ パーソナルジムに通ってみた ⚫ ネガティブ・ケイパビリティ〜あなたの積年の悩みを、一瞬で解決させない〜
  12. イベントのお知らせ アンケートにご回答いただくと優先予約可能! 回答期限:10/19(木)12:00まで ▼日程:10/19(木) 17:00 - 18:30 ▼内容:パーソルキャリアのエンジニア部署内で行っている 勉強会を皆さま向けに開催します。 エン

    ジニ ア勉 強 会 ( 卒 業 年 度 不 問) エン ジニ アパネル デ ィ ス カ ッシ ョ ン (25卒限定) ▼日程:10/24(火) 16:00 - 17:00 ▼内容:就活の進め方やパーソルキャリアについて等 パネルディスカッション形式でお話しします。 ▼マイページを お持ちの方 ▼マイページを お持ちの方 ▼マイページを お持ちでない方 こちらのQRコード または、チャットへ お送りするリンク から予約下さい!