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.3k
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
December 20, 2023
Tweet
Share
More Decks by techtekt
See All by techtekt
ハッピーになる機械学習モデル開発 〜なるべく手間をかけずにコードの品質向上を目指す 〜
techtekt
0
66
Power BI 活用推進の歩み
techtekt
0
59
スクラム研修
techtekt
0
4.2k
データベース研修
techtekt
7
5.5k
良いコードとは 研修
techtekt
2
4.4k
Git研修1
techtekt
0
4.4k
React & Next.js研修
techtekt
0
4.3k
Security基礎研修
techtekt
1
4.3k
QAエンジニア組織立ち上げはじめの一歩
techtekt
0
890
Featured
See All Featured
Bash Introduction
62gerente
608
210k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Optimizing for Happiness
mojombo
375
69k
BBQ
matthewcrist
84
9.2k
Visualization
eitanlees
143
15k
The Language of Interfaces
destraynor
154
24k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How to Think Like a Performance Engineer
csswizardry
16
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
What's new in Ruby 2.0
geeforr
341
31k
Code Review Best Practice
trishagee
62
16k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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 (テックテクト)』をご存じですか? 過去開催したイベントの レポートが見れる! ▼こちらからアクセス! 新入社員が書いた
記事も見れる! 技術についても 学べる!