Next.jsで開発した投稿機能搭載のブログテンプレートを公開！

dependencies:
@next-auth/prisma-adapter 1.0.7                   file-type 18.5.0                                  next-auth 4.24.3                                  @prisma/client 5.4.2                              jschardet 3.0.0                                   nodemailer 6.9.6                                  
bcrypt 5.1.1                                      jsdom 22.1.0                                      sanitize-html 2.11.0                              ckeditor5-custom-build file:lib/ckeditor5-custom  negotiator 0.6.3                                  sharp 0.32.6                                      
cookies-next 4.0.0                                next 14.0.2                                       

devDependencies:
@formatjs/intl-localematcher 0.4.2         @types/negotiator 0.6.2                    
prisma 5.4.2                               @fortawesome/fontawesome-svg-core 6.4.2    
@types/node 20.8.7                         react 18.2.0                               
@fortawesome/free-brands-svg-icons 6.4.2   @types/nodemailer 6.4.13                   
react-dom 18.2.0                           @fortawesome/free-regular-svg-icons 6.4.2  
@types/react 18.2.31                       react-hook-form 7.47.0                     
@fortawesome/free-solid-svg-icons 6.4.2    @types/react-dom 18.2.14                   
react-select 5.7.7                         @fortawesome/react-fontawesome 0.2.0       
@types/sanitize-html 2.9.3                 sass 1.69.4                                
@types/bcrypt 5.0.1                        animate.css 4.1.1                          
tocbot 4.21.2                              @types/jsdom 21.1.4                        
highlight.js 11.8.0                        typescript 5.2.2     

├── app
│   └── [lang]  // 言語判定用パラメータ
│       ├── admin  // 管理パネルのページ群
│       │   ├── category
│       │   ├── media
│       │   ├── post
│       │   └── post-list
│       ├── api
│       │   ├── auth  // 管理パネルへのログイン処理に使う認証処理
│       │   ├── blogcard  // ブログカードの情報取得
│       │   ├── category
│       │   │   ├── create
│       │   │   ├── get
│       │   │   │   ├── related-post
│       │   │   │   └── route.ts
│       │   │   ├── slug-exist  // スラグからカテゴリーを取得
│       │   │   └── update
│       │   ├── contact  // お問い合わせで使うメール送信処理
│       │   ├── discussion  // 記事のコメント管理
│       │   │   ├── create
│       │   │   └── get
│       │   ├── get-media
│       │   ├── get-media-first
│       │   ├── media-stream  // 保存されたメディアから画像をストリームで配信する
│       │   │   ├── icon
│       │   ├── post  // 記事情報管理
│       │   │   ├── create
│       │   │   ├── get
│       │   │   ├── get-many
│       │   │   └── update
│       │   ├── register  // ユーザー登録
│       │   ├── rm-media  // メディアの削除
│       │   ├── upload  // メディアのアップロード
│       │   └── userexist  // ユーザー存在チェック
│       ├── article  // 記事ページ
│       │   ├── [permalink]  // パーマリンクで記事を表示
│       ├── auth  // ユーザー認証ページ
│       │   ├── login
│       ├── category // カテゴリーごとの新着記事表示
│       │   ├── [slug]  // スラグを使って表示
│       └── privacy-policy  // プライバシー・ポリシーページ
├── components
│   ├── small-parts
│   └── use-client
├── external  // scriptタグで処理する必要のあるスクリプト
├── lib
│   └── ckeditor5-custom
├── locales  // 多言語化に対応するための言語辞書ファイルとスクリプト
├── prisma  // データベーススキーマの管理
│   └── migrations
└── types  // TypeScript用型定義ファイル軍
    ├── define-type.d.ts
    └── override-react.d.ts

# App settings
APP_ROOT_PATH=/var/www/next-creator  // プロジェクトルートまでの絶対パス
API_ACCESS_ADDRESS="http://192.168.1.45:8648"  // サーバーコンポーネントでfetchするとき用
NEXT_PUBLIC_SITE_TITLE="site title"
APP_URL=http://ryuseiweb.localhost
NEXT_PUBLIC_APP_URL=http://ryuseiweb.localhost
API_ACCESS_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# Google Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID = "G-xxxxxxxxxx"

# next-auth
NEXTAUTH_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXTAUTH_URL=http://ryuseiweb.localhost

# smtp server setting
SMTP_HOST="smtp-mail.outlook.com"
SMTP_USER="xxxxxxx@xxxxxxxxxx"
SMTP_PASSWORD="xxxxxxxxxxx"
USE_ADDRESS="xxxxxxxxxxx@xxxxxxxxxxx"

# Prisma
DATABASE_URL="mysql://[username]:[password]@[hostname]:[port]/[databasename]"

{
  "locale": {
    "default": "ja",
    "accept-lang": [ "ja", "en" ],
    "labels": {
      "ja": { "ja": "日本語", "en": "英語" },
      "en": { "ja": "Japanese", "en": "English" }
    }
  }
}

pnpx prisma generate

pnpx prisma migrate dev

//  ・・・・・・・
const cspHeader = `
    default-src 'self';
    script-src 'self' https://www.googletagmanager.com  https://www.google-analytics.com 'unsafe-inline' 'unsafe-eval';
    style-src 'self' 'unsafe-inline';
    style-src-elem 'self' https://fonts.googleapis.com 'unsafe-inline';
    img-src 'self' https://* blob: data:;
    font-src 'self' https://fonts.gstatic.com;
    object-src 'none';
    base-uri 'self';
    form-action 'self' *;
    frame-ancestors 'none';
    block-all-mixed-content;
    upgrade-insecure-requests;
  `;
//  ：：：：：：：