add article

src/contents/20200628-next-s3/index.md

@@ -1,7 +1,7 @@
 ---
 path: /s3-next-deploy
 created: "2020-06-28"
-title: S3 に NextJS 製 App をデプロイできるか
+title: S3 に Next.js 製 App をデプロイできるか
 visual: "./visual.png"
 tags: [s3, nextjs]
 userId: sadnessOjisan
@@ -15,7 +15,7 @@ Lambda@Edge が必要で、さらに Lambda をルーティングごとに実行
 
 Static HTML Export での運用であれば、少し工夫をすれば CloudFront を使わずに S3 だけでもデプロイできるのでその解説をします。
 
-## NextJS は Static HTML Export 機能がある
+## Next.js は Static HTML Export 機能がある
 
 NextJS は SSR を容易にしてくれる FW という印象がありますが、Static HTML Export 機能も備わっており、SSR の対象を事前に Rendering して静的ページを吐き出すことができます。
 このページをホスティングすれば NodeJS 以外の環境でも NextJS を動かすことができます。

src/contents/20200718-jsx-preview/index.md

@@ -29,7 +29,7 @@ ogpng では JSX からの OGP 画像をサポートしたのですが、それ
 ## そもそもどうやって HTML を画像化していたか
 
 ogpng では左がエディタ(monaco-editor を使っています)、右が preview です。
-具体的には、React + NextJS + react-monaco-editor を使っています。
+具体的には、React + Next.js + react-monaco-editor を使っています。
 
 HTML のプレビューは、monaco-editor に入力した HTML を React の dangerouslySetInnerHTML を使ってレンダリングすることで実現しています。
 そしてその プレビューの DOM を [dom-to-image](https://github.com/tsayen/dom-to-image) で画像として出力しています。

src/contents/20200805-vercel-env/index.md

@@ -12,8 +12,8 @@ Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けて
 辛さの原因は Vercel のアップデートのスピードが早く正しい情報にアクセスし辛いことが一因としてあるので、それをなくせたら良いなと思っています。
 もしこのドキュメントが古くなっていたら [Issues](https://github.com/sadnessOjisan/blog.ojisan.io/issues) などからお知らせていただけると幸いです。
 
-NextJS を前提とした解説になりますが、 NextJS の環境変数周りについては解説を省きます。
-Vercel での環境変数周りがややこしいのは NextJS に起因しているものもあるとは思うのですが、話が長くなるので別の記事にて補足したいと思います。
+Next.js を前提とした解説になりますが、 Next.js の環境変数周りについては解説を省きます。
+Vercel での環境変数周りがややこしいのは Next.js に起因しているものもあるとは思うのですが、話が長くなるので別の記事にて補足したいと思います。
 (ビルド時・サーバー・クライアントで見える・渡せる環境変数や方法が変わる話)
 
 ## やりたいこと: フロント側から環境変数別にエンドポイントを切り替える

src/contents/20201118-next-env/index.md

@@ -1,7 +1,7 @@
 ---
 path: /next-env
 created: "2020-11-18"
-title: NextJS における環境変数まわりの挙動まとめ
+title: Next.js における環境変数まわりの挙動まとめ
 visual: "./visual.png"
 tags: ["nextjs", "vercel"]
 userId: sadnessOjisan

src/contents/20201218-next-linaria-setup/index.md

@@ -1,7 +1,7 @@
 ---
 path: /next-linaria-setup
 created: "2020-12-18"
-title: NextJS で linaria を動かすために知っておくと良いこと
+title: Next.js で linaria を動かすために知っておくと良いこと
 visual: "./visual.png"
 tags: ["nextjs", "linaria"]
 userId: sadnessOjisan

src/contents/20201231-blog-hurikaeri-2020/index.md

@@ -55,7 +55,7 @@ ex)
 
 - [gatsby-plugin-netlify-cache のキャッシュが効かない](https://blog.ojisan.io/gatsby-meet-netlify-botsu)
 - [stripe を使った決済機能の実装方法を学ぶ前に知っとくといい全体感](https://blog.ojisan.io/how-to-stripe)
-- [NextJS で linaria を動かすために知っておくと良いこと](https://blog.ojisan.io/next-linaria-setup)
+- [Next.js で linaria を動かすために知っておくと良いこと](https://blog.ojisan.io/next-linaria-setup)
 
 他の人にとっては困っていない内容だったりもするので、「なんでこんな内容でブログ書くの？」と言われたこともありますが、それは自分がわからなかったからです。
 自分にとっては当たり前ではなかったものはちゃんと記事にして文書化していきたいと思っています。

src/contents/20220424-next-tutorial-for-react-user/index.md

@@ -1,15 +1,15 @@
 ---
 path: /next-tutorial-for-react-user
 created: "2022-04-24"
-title: React ユーザー向けの NextJS ガイド
+title: React ユーザー向けの Next.js ガイド
 visual: "./visual.png"
 tags: ["react", "nextjs"]
 userId: sadnessOjisan
 isFavorite: false
 isProtect: false
 ---
 
-最近会社で NextJS のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。
+最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。
 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。
 つまり React 単体と Next の差分をまとめる。
 
@@ -148,7 +148,7 @@ const TestPage: VoidFunctionComponent<Props> = (props) => {
 export default TestPage;
 
 export const getServerSideProps: GetServerSideProps<Props> = async (
-  context
+  context,
 ) => {
   return {
     props: { hoge: "hogeeeeeee" },

src/contents/20220505-next-nest-ng/index.md

@@ -1,7 +1,7 @@
 ---
 path: /next-nest-ng
 created: "2022-05-05"
-title: NextJS でコンテンツモデルを無視してHTMLを書くと Dev サーバーでエラー扱いになる理由を調べた
+title: Next.js でコンテンツモデルを無視してHTMLを書くと Dev サーバーでエラー扱いになる理由を調べた
 visual: "./visual.png"
 tags: ["react", "nextjs"]
 userId: sadnessOjisan
@@ -26,7 +26,7 @@ Error: Hydration failed because the initial UI does not match what was rendered
 
 ## 実験
 
-どういう HTML が NextJS 的に NG になるのか実験する。
+どういう HTML が Next.js 的に NG になるのか実験する。
 
 これは OK
 
@@ -221,7 +221,7 @@ FYI: <https://github.com/vercel/next.js/discussions/35773>
 
 結局はちゃんとタグを書こうという話ではあるのだが、どうしてこのルールを破ると Next はエラーとして警告を出すのだろうか。
 
-### NextJS ではいつトースターが出るのか
+### Next.js ではいつトースターが出るのか
 
 トースターが出る条件については実験をするとわかる。
 
@@ -252,7 +252,7 @@ export default () => {
 const recoverableError = new Error(
   "There was an error while hydrating. Because the error happened outside " +
     "of a Suspense boundary, the entire root will switch to " +
-    "client rendering."
+    "client rendering.",
 );
 ```
 

src/contents/20220520-i-hate-infinite-scroll/index.md

@@ -17,7 +17,7 @@ isProtect: false
 
 ## 一般的な実装方法
 
-NextJS を例に解説するが、React であれば react-router でも同様のことはできるはずである。react 以外の例は試していないが考えることは同じであるはず。
+Next.js を例に解説するが、React であれば react-router でも同様のことはできるはずである。react 以外の例は試していないが考えることは同じであるはず。
 
 また、まずは愚直にやると辛い例を示したいので、雑な実装を紹介する。正答は後の方で解説する。
 

src/contents/20221003-next-astro/index.md

@@ -15,7 +15,7 @@ isProtect: false
 
 ## Dynamic Routing
 
-Routing 自体は NextJS と同じようにできる。つまり `pages/` に `[id].astro` のようなものを作れば良い。それが URL になる。
+Routing 自体は Next.js と同じようにできる。つまり `pages/` に `[id].astro` のようなものを作れば良い。それが URL になる。
 この id は `const { id } = Astro.params;` のようにして取れる。Next と違って context は無いが、Astro という名前空間から取ってこれる。
 
 ## getStaticPaths

src/contents/20230112-blog-hurikaeri-2022/index.md

@@ -85,11 +85,11 @@ isProtect: true
 
 <https://b.hatena.ne.jp/entry/s/blog.ojisan.io/i-hate-infinite-scroll/>
 
-### React ユーザー向けの NextJS ガイド
+### React ユーザー向けの Next.js ガイド
 
 会社ではじめて Next 書く人向けのチュートリアルを担当したので、そのとき話したことを文書化しました。
 
-![React ユーザー向けの NextJS ガイド](./next.png)
+![React ユーザー向けの Next.js ガイド](./next.png)
 
 <https://blog.ojisan.io/next-tutorial-for-react-user/>
 

src/contents/20230611-kiai-wo-irete-kaita-yatsu/index.md

@@ -56,7 +56,7 @@ Web 標準, Rust
 
 ![lp](./websocket.png)
 
-## React ユーザー向けの NextJS ガイド
+## React ユーザー向けの Next.js ガイド
 
 https://blog.ojisan.io/next-tutorial-for-react-user/