Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
Search
techtekt
December 20, 2023
0
1.5k
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
December 20, 2023
Tweet
Share
More Decks by techtekt
See All by techtekt
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
240
VSMを活用したFindy Team+の運用促進 / promoting-operation-of-findy-team-plus-using-vsm
techtekt
0
240
ハッピーになる機械学習モデル開発 〜なるべく手間をかけずにコードの品質向上を目指す 〜
techtekt
0
110
Power BI 活用推進の歩み
techtekt
0
73
スクラム研修
techtekt
0
4.6k
データベース研修
techtekt
7
6k
良いコードとは 研修
techtekt
2
4.8k
Git研修1
techtekt
0
4.7k
React & Next.js研修
techtekt
0
4.6k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
It's Worth the Effort
3n
183
28k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Pragmatic Product Professional
lauravandoore
32
6.3k
A designer walks into a library…
pauljervisheath
204
24k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Speed Design
sergeychernyshev
25
670
Transcript
「microCMS」を使って、 Next.jsアプリ開発しよう! Dockerを用いGCPへデプロイするシーンも公開 シニアエンジニア 青木美穂子
自己紹介 青木 美穂子 パーソルキャリア株式会社 サービス開発部 シニアエンジニア 👩💻Webフロントエンドが専門 👀デザインとエンジニアリングの間の領域に興味あり 👨👩👧 👦
家族4人 🚶散歩・読書が好き 🍫好きな食べ物はマルセイバターサンド
パーソルキャリアについて
パーソルキャリアについて
今日の流れ ハンズオン 1. Next.jsでアプリケーション(with Docker)の作成 2. アプリケーションのTypeScript化 3. microCMSのセットアップ 4.
アプリケーションにmicroCMSへの通信を実装 5. アプリケーションにニュース一覧ページとニュース詳細ページを実装 デプロイ 1. Docker上での実行 2. DockerイメージをContainer Registryへpush 3. Cloud Runでサービスを作成
今日の環境 • MicroCMS無料アカウント • Node.js v18 • Docker Desktop •
VSCode
Next.jsとは https://nextjs.org/ • Reactベースのフレームワーク • Server Side Rendering, Static Site
Generation • Routing
サンプルから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へのデプロイの時に使います
作ったアプリケーションを起動しよう $ cd nextjs-microcms-docker $ yarn dev → http://localhost:3000/ をブラウザで開く
アプリケーションをTypeScript化しよう(1) https://www.typescriptlang.org/ TypeScript is JavaScript with syntax for types. $
yarn add -D typescript @types/node @types/react @types/react-dom $ npx tsc --init
アプリケーションをTypeScript化しよう(2) package.jsonに太字部分を追加する "scripts": { "dev": "next dev", "build": "next build",
"start": "next start", "type-check": "tsc" },
アプリケーションをTypeScript化しよう(3) 作成されたtsconfig.jsonに太字部分を追加する "compilerOptions": { …, "jsx": "preserve", "baseUrl": "./", "noImplicitAny":
false }, "exclude": [ "node_modules", "dist" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] }
アプリケーションをTypeScript化しよう(4) index.d.tsを作成する declare module '*.css';
アプリケーションをTypeScript化しよう(5) ファイルの拡張子を変更する • pages/_app.js → pages/_app.tsx • pages/index.js → pages/index.tsx
• pages/api/hello.js → pages/api/hello.ts $ yarn type-check → Errorなく完了すればOK
microCMSをセットアップしよう 1. https://microcms.io/ からログイン 2. https://app.microcms.io/create-service 「サービスを作成」で「一から作成する」をクリック 3. サービス名とサービスIDを入力して「サービスを作成する」をクリック 4.
https://<yourServiceId>.microcms.io/create-api 「APIを作成」で「お知らせ」をクリック →「お知らせ」と「カテゴリ」APIが作成される
microCMSへの通信を実装しよう(1) https://github.com/microcmsio/microcms-js-sdk It helps you to use microCMS from JavaScript
and Node.js applications. $ yarn add microcms-js-sdk
microCMSへの通信を実装しよう(2) .env.localを作成する → https://<serviceId>.microcms.io URLからサービスIDを確認 → https://<serviceId>.microcms.io/api-keys からAPI Keyを確 認
NEXT_PUBLIC_MICROCMS_API_URL=<serviceId> NEXT_PUBLIC_MICROCMS_API_KEY=<APIKey>
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 ?? '' });
microCMSへの通信を実装しよう(3-2) lib/api.tsを作成する Newsタイプの作成 export interface News { id: string, title:
string, content: string }
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 }
ニュース一覧ページを実装しよう(1) pages/index.tsを編集する const [newsList, setNewsList] = useState<News[]>([]); useEffect(() => {
getNewsList().then((newsList: News[]) => { setNewsList(newsList) }) }, []);
ニュース一覧ページを実装しよう(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} →</h3> <p></p> </Link>) } ...
ニュース詳細ページを実装しよう(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]);
ニュース詳細ページを実装しよう(2) pages/news/[id].tsxを作成する return ( <div className={styles.container}> <main className={styles.main}> <h1 className={styles.title}>
{news?.title} </h1> <p className={styles.description}> {parse(news?.content ?? '')} </p> </main> </div> )
動かしてみましょう $ yarn dev
microCMSの便利機能 • 画像サイズ ◦ 画像の縦横比調整、切り取りや表示領域の最適化 • クエリパラメータ ◦ limit, offset
: ページング ◦ q : 全文検索 ◦ fields : 取得する要素の指定 ◦ filters : フィルタ条件
おつかれさまでした! 🍵
Docker上で実行しましょう $ docker build -t nextjs-microcms-docker . $ docker run
-p 3000:3000 nextjs-microcms-docker
Docker Composeを使いましょう(1) docker-compose.ymlを作成する version: '3.8' services: app: build: . ports:
- 3000:3000
Docker Composeを使いましょう(2) Dockerの起動 $ docker compose up -d Dockerの終了 $
docker compose down
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
Cloud Runでサービスを作成する
お知らせ
新卒採用の職種一覧 ビジネス職 新規事業開発職 企画職 エンジニア職 デザイナー職 データスペシャリスト職 さまざまなエリア・職種に 配属可能性あり 特定のポジション
確約で配属 リクルーティングアドバイザー キャリアアドバイザー プロジェクトエージェント リクルーティングコンサルタント HiPro Bizコンサルタント 新卒採用人事 サービス企画 プロダクト企画 ITコンサルタント クライアントサクセス エンジニア UI/UXデザイナー データサイエンティスト
学びの環境 • エンジニアが多様なキャリアを実現できるよう、さまざまな取り組みが 行われています。 学 び • 書籍購入補助 • 資格取得費用補助
• セミナーや研修費用負担 • 英語学習サポート 社 外 貢 献 • techtekt(テックテクト)での記事執筆 • TECH Street (テックストリート)での登壇 • 各種セミナーでの講演 そ の 他 • 開発用PCいつでも交換OK • 部署によっては最新スペックのMac貸与 • モニター貸与
勉強会一例 • エンジニア組織だけではなく、デザイナーなど他職種との開催も。 • 新卒社員同士で行っている勉強会もあり〼。 ⚫ プロジェクトの危機を察知するフレームワーク ⚫ QAガイドライン作ったので紹介と簡単な品質講座 ⚫
Chrome拡張機能作ってSlack便利にしてみた! ⚫ なぜ「サウナイキタイ」は使いやすく美しいのか解剖してみた。 ⚫ パーソナルジムに通ってみた ⚫ ネガティブ・ケイパビリティ〜あなたの積年の悩みを、一瞬で解決させない〜
イベントのお知らせ アンケートにご回答いただくと優先予約可能! 回答期限:10/19(木)12:00まで ▼日程:10/19(木) 17:00 - 18:30 ▼内容:パーソルキャリアのエンジニア部署内で行っている 勉強会を皆さま向けに開催します。 エン
ジニ ア勉 強 会 ( 卒 業 年 度 不 問) エン ジニ アパネル デ ィ ス カ ッシ ョ ン (25卒限定) ▼日程:10/24(火) 16:00 - 17:00 ▼内容:就活の進め方やパーソルキャリアについて等 パネルディスカッション形式でお話しします。 ▼マイページを お持ちの方 ▼マイページを お持ちの方 ▼マイページを お持ちでない方 こちらのQRコード または、チャットへ お送りするリンク から予約下さい!
ご案内 • パーソルキャリアのエンジニア組織について 理解が深まる 『techtekt (テックテクト)』をご存じですか? 過去開催したイベントの レポートが見れる! ▼こちらからアクセス! 新入社員が書いた
記事も見れる! 技術についても 学べる!