管理栄養士と個人開発者の夫婦ブログ

ABOUT
おまめ
にゃんちゅう
料理・栄養
プログラミング
雑記
デザイン
ホテル・お店
コスメ
ブログ運営

初心者がReact/Next.js + Vercelでブログ作るまで[1]

2020-11-14個人開発5174

😱 react初心者あるある

こんな悩みを持つ人の支援でありたい。

  • jsxにHTML/CSSを書くことはできる。もっと書けるようになりたい。
  • 何が分からないか分からない。
  • エラーが出たらスグにググってる。
  • 最終的にreactで個人開発したい。

⚡️ react学ぶ価値を再確認

事実:

  • reactは世界的に大人気
  • react学べば、WEBサービスを作れる時代
  • 派生しているreact nativeを使えばアプリも作れる

空想:

  • react学べば、食いっぱぐれない
  • WEBサービスもアプリも個人開発できるようになるかも

💻 手順

  1. Nextjsのcontentful exampleから始める
  2. 記事ページを表示する
  3. 記事ページでcontentfulのマークダウンをレンダリングする

2の段階でぶつかった壁を記事にしていきます。

1.Nextjsのcontentful exampleから始める

VercelのテンプレートからNextjs+contentfulを立ち上げます。 https://vercel.com/import/templates

contentfulの設定などドキュメントはこちらを参照。 https://vercel.com/guides/deploying-next-and-contentful-with-vercel

ひとまず記事一覧ページが作れるかと思います。

2.記事ページを表示する

ここからはexampleから進んで、記事本文のページを作っていきます。

nextは /blog/[slug].jsx でslugに応じたページを生成してくれます。 next/routerを使ってurlのslugを取得し、そのslugでcontentfulの記事を取得・表示します。

こんな階層構造に。 folder

早速、Next.jsのrouterでハマりました。

URLのslugをもとに、contentfulの記事を取得しますが、ハマってしまいました。

学んだこと

  1. next/routerが初回は取得できないこと
  2. useEffect第二引数に指定した値に変化があったら、再実行してくれること
  3. HTML描画時にエスケープしないと、1と2の影響でエラーになる

参考にさせていただいたのはこちら

結果、このような書き方にして、なんとか表示できました。

import { useEffect, useState } from "react";
import { useRouter } from 'next/router'
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import {createClient} from "../../components/contentful";
const client = createClient()
function BlogPost() {
const router = useRouter()
const [queryId, setQueryId] = useState(null)
const [post, setPost] = useState({});
useEffect(()=> {
if(router && router.pathname) {
setQueryId(router.query.slug)
}
}, [router])
async function fetchEntries() {
const entries = await client.getEntries({
content_type: "blogPost",
limit:1,
'fields.slug': queryId
})
if (entries.items[0].fields.slug === queryId) {
return entries.items[0].fields
}
// todo! return 404
}
useEffect(()=> {
async function getPost() {
const targetPost = await fetchEntries();
setPost(targetPost);
}
getPost();
}, [queryId])
return (
<>
<Header />
{post ?
<>
{console.log(post)}
{post.category ? post.category.fields.name : ''}
{post.title}
{post.heroImage ? <img src={post.heroImage.fields.file.url} alt=""/> :''}
{post.publishDate}
{post.body}
</>
: '404'}
<Footer />
</>
);
}
export default BlogPost;

まずはここまで表示できました。

result

3.記事ページでcontentfulのマークダウンをレンダリングする

MDXを入れたかったけど断念しreact-markdownを導入しました。 syntax highlightは React Syntax Highlighterを導入。

学んだこと

インストール

npm i react-markdown
npm i react-syntax-highlighter

マークダウン変換

import * as Markdown from 'react-markdown'
import RenderOptions from "../../components/RenderOptions"
~
function BlogPost() {
return (
<>
~
<Markdown source={post.body} renderers={RenderOptions} />
~
</>
)
}

RenderOptions.js にてカラー指定。普段使っているVScodeのカラーにしました。

import React from 'react'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism'
const RenderOptions = {
code: ({language, value}) => {
return <SyntaxHighlighter style={vscDarkPlus} language={language} children={value} />
}
}
export default RenderOptions;

こんな感じでマークダウンとシンタックスハイライトが機能しました。 スクリーンショット 2020-11-03 21.46.14

↓こちらもぜひ参考にしてみてください↓

この記事をシェアする

個人開発」のおすすめ記事も
読んでいってね!

Next/exportで編集可能なHTMLは作れないけど、FTPでも納品できる

2021-07-24 | おまめ

サムネやWEBデザインに使える!メッシュグラデーションまとめ

2021-07-10 | おまめ

FigmaでSVGを書き出してreact/typescriptでサクっと扱うSVGR

2021-02-14 | おまめ

Vercel + Contentful「Resource is limited」でデプロイできなくなった

2020-12-30 | おまめ

年内にもう一度読みたい!PM向けオススメ記事7選+α

2020-12-27 | おまめ

初心者がReact/Next.js + Vercelでブログ作るまで[1]

2020-11-14 | おまめ
おまめ
おまめ
夫。個人開発者・ブロガー・デザイナー。夫婦でサイドFIRE目指してます。