フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

Next.js を nginx にデプロイする

● Next.js を nginx にデプロイする

・Next.js を使用できるようにする

1. Next.js の準備

npm run build
npm run start

2. Nginxの設定

変更前の設定 ( 例えば PHP で全てを処理させるようなサイトだと以下のような設定になっていると思います。)

  location / {
    try_files $uri $uri/ /index.php?$args;
  }

next.js用設定に変更します。 ( localhost:3099 に接続 )

location @nextserver {
    proxy_pass http://localhost:3099;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    add_header X-Custom-HeaderNextServer "Value for Custom Header @nextserver";
}

# 1 . favicon専用の設定  
location ~ ^/favicon\.ico {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}  
  
# 2 . SVGアイコン用の設定  
location ~ ^/icon\.svg {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}  
  
# 3 . Apple Touch Icon用の設定  
location ~ ^/apple-icon\.png {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}

# Next.js静的ファイル用の設定  
location ^~ /_next/static/ {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
    expires 365d;  
    add_header Cache-Control 'public, max-age=31536000, immutable';  
}  
  
# その他の_nextパス  
location ^~ /_next {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}  

location / {
    try_files $uri $uri.html /index.html @nextserver;
}

3. Nginxのリスタート

nginx -s reload

4. Next.js の public ディレクトリを表示できるようにする。

シンボリックリンクを貼ればOKです

ln -s /PATH/TO/YOUR/APP/public /PATH/TO/YOUR/WEB-SITE/DocumentRoot

以上でokです

Next.js とphpを使用できるようにするには

Next.js とphpを使用できるように下記の仕様とします

「/php/<ファイル名>でアクセスした場合」→  /home/YOUR/SERVER/PATH/DocumentRoot/php/<ファイル名>を返す
「/でアクセスした場合」→  next.jsを返す  
	location /php/ {
	    alias  /home/YOUR/SERVER/PATH/DocumentRoot/php/;
	    index  index.html index.htm;
	}

	location / {
      	# Next.js Server
      	proxy_pass http://localhost:3000;
	}
No.2086
10/20 13:07

edit