shzawa / nextjs-blog-from-scratch Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 1.0 618 KB

Home Page: https://tkzawa.vercel.app/

TypeScript 89.59% CSS 8.65% JavaScript 1.65% Shell 0.11%

nextjs-blog-from-scratch's People

Contributors

Forkers

usagizmo

nextjs-blog-from-scratch's Issues

スマホで見るとサイト名がページによって左に寄ってる

寄ってる↓

正常↓

API移管

https://microcms.io/pricing

Aboutページ作りたい

TOPページ
折り畳めるようにした cacheで記憶

MDX導入したらメリット多いのでは…

メリット

Twitter埋め込み導入が楽になる
コードスニペットのデザインも楽になる <- 要調査|検証
他わかんね

記事ごとにShareボタン配置したい

とりあえずTwitterだけ

`[FQDN]/post`で見れる記事を最新6件目以降にしたい

コンポーネントの責務を明確にする

header部分を記事以外の全ページ共通化したい

けどHTML生では嫌

ESLintとPrettier入れる

むしろ何故最初から入れなかったのか

PreRendering時に/posts/[id].tsxの`TagsLayout`の`key`がundefinedでエラー

状況

npm run dev実行後 http://localhost:3000 にアクセスすると以下のようなエラー

→ npm run dev

> [email protected] dev /Users/ozawa_shotaro/sandbox/nextjs-blog
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
Warning: TagsLayout: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)
    at TagsLayout (webpack-internal:///./components/layout.tsx:132:20)
    at li
    at ul
    at section
    at main
    at div
    at Container (webpack-internal:///./components/layout.tsx:24:19)
    at HomeLayout (webpack-internal:///./components/layout.tsx:59:20)
    at HomePage (webpack-internal:///./pages/index.tsx:34:18)
    at MyApp (webpack-internal:///./pages/_app.tsx:24:15)
    at AppContainer (/Users/ozawa_shotaro/sandbox/nextjs-blog/node_modules/next/dist/next-server/server/render.js:28:950)

分かっていること

PreRendering時にはTagsLayout内のliタグのkeyが空
- keyが空の時空文字を挿入 -> 効果なし

Code Snippetのtitle(ファイル名)欄のデザインを自然な形にしたい

投稿順が逆になってるくね？

build時sitemapを作る

PostsのComponent分けよう

posts/内を年/月別フォルダで分けたい

ファイル多くなってくるとだるいお気持ち

RecentPostsの一覧の文字をもうちょい小さくしたい

存在感がデカすぎる

OGP改修

404ページ全部効かなくなってる

状況

なにこれ…
何もしてないのに壊れちゃった❗

試したこと

正常に動いていたcommitに遡ってnpm iし直して再現した
-> 効かなくなってるのが再現された

Postに画像載せたい

remark-unwrap-images 入れる

PostのCreatedAtとUpdatedAtを分けたい

/tags/[tag].tsxで記事がヒットしない場合、そのページのデザインに合った404ページを描画したい

状況

/tags/[tag].tsxのgetStaticPropsで記事が1件もヒットしなかった場合、

if (!posts.length) {
  return {
    notFound: true
  }
}

でエラーハンドリングをしているが、この状態だと pages/404.tsx が描画されてしまう。

Issueを立てた時点で分かっていること

/tags/404.tsx を配置した -> 効果なし