diff --git a/src/app/blog/color-contrast/layout.tsx b/src/app/blog/color-contrast/layout.tsx
index 871272c..6a39a24 100644
--- a/src/app/blog/color-contrast/layout.tsx
+++ b/src/app/blog/color-contrast/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import { BlogLayout } from '../_components/blog-layout/blog-layout';
+import { PropsWithChildren } from 'react';
 
 export const metadata: Metadata = {
   title: '色のコントラスト比は重要だけどどうやって求めるんだっけ？',
@@ -28,11 +29,7 @@ export const metadata: Metadata = {
 // TODO:pprが利用可能になったら切り替える
 export const dynamic = 'force-dynamic';
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <BlogLayout updatedAt="2024/02/12" slug="color-contrast">
       {children}
diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx
index e7f1d3b..015ca6b 100644
--- a/src/app/blog/layout.tsx
+++ b/src/app/blog/layout.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
 import { ExternalBlog } from './_components/external-blog';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Blog',
@@ -20,11 +21,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <>
       {/* Get the latest one from: https://katex.org/docs/browser */}
diff --git a/src/app/blog/tanstack-router-introduction/layout.tsx b/src/app/blog/tanstack-router-introduction/layout.tsx
index 38c7c0b..4f70ec3 100644
--- a/src/app/blog/tanstack-router-introduction/layout.tsx
+++ b/src/app/blog/tanstack-router-introduction/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import { BlogLayout } from '../_components/blog-layout/blog-layout';
+import { PropsWithChildren } from 'react';
 
 export const metadata: Metadata = {
   title: 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ',
@@ -30,11 +31,7 @@ export const metadata: Metadata = {
 // TODO:pprが利用可能になったら切り替える
 export const dynamic = 'force-dynamic';
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <BlogLayout
       updatedAt="2023/07/13"
diff --git a/src/app/blog/tanstack-router-introduction/page.mdx b/src/app/blog/tanstack-router-introduction/page.mdx
index 68f21a0..d4b2938 100644
--- a/src/app/blog/tanstack-router-introduction/page.mdx
+++ b/src/app/blog/tanstack-router-introduction/page.mdx
@@ -50,7 +50,7 @@ npm i -D @tanstack/router-devtools@beta
 ```tsx
 const TanStackRouterDevtools = import.meta.env.DEV
   ? // 遅延読み込みする
-    React.lazy(() =>
+    lazy(() =>
       import('@tanstack/router-devtools').then((res) => ({
         default: res.TanStackRouterDevtools,
       })),
diff --git a/src/app/characters/check-syntax/_state/text.tsx b/src/app/characters/check-syntax/_state/text.tsx
index 061d052..b45bddb 100644
--- a/src/app/characters/check-syntax/_state/text.tsx
+++ b/src/app/characters/check-syntax/_state/text.tsx
@@ -2,14 +2,16 @@
 
 import {
   createContext,
+  Dispatch,
   FC,
   PropsWithChildren,
+  SetStateAction,
   useCallback,
   useContext,
   useState,
 } from 'react';
 
-type Setter<T> = React.Dispatch<React.SetStateAction<T>>;
+type Setter<T> = Dispatch<SetStateAction<T>>;
 export type ResultMessage = Record<number, string[]>;
 
 const TextContext = createContext<string | undefined>(undefined);
diff --git a/src/app/characters/check-syntax/layout.tsx b/src/app/characters/check-syntax/layout.tsx
index 5666ba8..8bf776a 100644
--- a/src/app/characters/check-syntax/layout.tsx
+++ b/src/app/characters/check-syntax/layout.tsx
@@ -1,5 +1,6 @@
 import { Heading } from '@/components/heading';
 import { CheckSyntaxProvider } from './_state/text';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: '日本語校正くん',
@@ -19,11 +20,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">日本語校正くん</Heading>
diff --git a/src/app/characters/counter/layout.tsx b/src/app/characters/counter/layout.tsx
index 74b35ee..53e1c5b 100644
--- a/src/app/characters/counter/layout.tsx
+++ b/src/app/characters/counter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: '文字数カウンター',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">文字数カウンター</Heading>
diff --git a/src/app/characters/layout.tsx b/src/app/characters/layout.tsx
index 77c054b..a8a767f 100644
--- a/src/app/characters/layout.tsx
+++ b/src/app/characters/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Characters',
@@ -21,11 +22,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-6">
       <Link href="/characters">
diff --git a/src/app/colors/contrasts/layout.tsx b/src/app/colors/contrasts/layout.tsx
index 175fdbc..8cc135f 100644
--- a/src/app/colors/contrasts/layout.tsx
+++ b/src/app/colors/contrasts/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'コントラスト比チェッカー',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">コントラスト比チェッカー</Heading>
diff --git a/src/app/colors/converter/layout.tsx b/src/app/colors/converter/layout.tsx
index 4d1b2bd..c14f46d 100644
--- a/src/app/colors/converter/layout.tsx
+++ b/src/app/colors/converter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: '色変換ツール',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">色変換ツール</Heading>
diff --git a/src/app/colors/layout.tsx b/src/app/colors/layout.tsx
index 21039dc..ae8535c 100644
--- a/src/app/colors/layout.tsx
+++ b/src/app/colors/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Colors',
@@ -19,11 +20,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-6">
       <Link href="/colors">
diff --git a/src/app/designs/layout.tsx b/src/app/designs/layout.tsx
index 64c2f73..1c4794c 100644
--- a/src/app/designs/layout.tsx
+++ b/src/app/designs/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Designs',
@@ -19,11 +20,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-6">
       <Link href="/number">
diff --git a/src/app/designs/rounded/layout.tsx b/src/app/designs/rounded/layout.tsx
index 453ec22..a4d5579 100644
--- a/src/app/designs/rounded/layout.tsx
+++ b/src/app/designs/rounded/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'かどまるラボ',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">かどまるラボ</Heading>
diff --git a/src/app/engineerings/creating/layout.tsx b/src/app/engineerings/creating/layout.tsx
index 028cfbf..b77d440 100644
--- a/src/app/engineerings/creating/layout.tsx
+++ b/src/app/engineerings/creating/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'テーブル作成',
@@ -15,11 +16,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex flex-col gap-4">
       <Heading type="h3">テーブル作成</Heading>
diff --git a/src/app/engineerings/layout.tsx b/src/app/engineerings/layout.tsx
index 8ca3507..ee42dee 100644
--- a/src/app/engineerings/layout.tsx
+++ b/src/app/engineerings/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Engineerings',
@@ -22,11 +23,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex flex-col gap-6">
       <Link href="/engineerings">
diff --git a/src/app/number/converter/layout.tsx b/src/app/number/converter/layout.tsx
index 1a8a3c1..cc06958 100644
--- a/src/app/number/converter/layout.tsx
+++ b/src/app/number/converter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: '基数変換ツール',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <Heading type="h3">基数変換ツール</Heading>
diff --git a/src/app/number/layout.tsx b/src/app/number/layout.tsx
index c73a9db..b486ecf 100644
--- a/src/app/number/layout.tsx
+++ b/src/app/number/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Number',
@@ -19,11 +20,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-6">
       <Link href="/number">
diff --git a/src/app/quizzes/fish-kanji/layout.tsx b/src/app/quizzes/fish-kanji/layout.tsx
index a825952..e8e32ae 100644
--- a/src/app/quizzes/fish-kanji/layout.tsx
+++ b/src/app/quizzes/fish-kanji/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'うおへんクイズ',
@@ -18,11 +19,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-4">
       <div className="font-notoSansJp" />
diff --git a/src/app/quizzes/layout.tsx b/src/app/quizzes/layout.tsx
index e9391d2..360b288 100644
--- a/src/app/quizzes/layout.tsx
+++ b/src/app/quizzes/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
   title: 'Quizzes',
@@ -19,11 +20,7 @@ export const metadata = {
   },
 };
 
-export default function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-6">
       <Link href="/quizzes">