Next.js subdomain setup not working

Published Sat Feb 04 2023

Next.js sub-domain Setup is way more complicated

Recently, I decided to build my personal website by using Next.js. I initailly decided to use sub-directoryfor my subdomain. Eventually, this method is failed and way more complicated.I've been search two whole days try to find a solution that could make it works. I found some solutions seem work to others. However, I won't work for me. Such as use Nginx rewrites/redirect. but it ends up with CORS disallowd and blocked errors. I list configurations below in case It will work one day if I gave it second try next time.

Nginx setup use regex path

location ^~ blog/ {
	rewrite ^/blog/?(.*)$ https://blog.example.com/$1 permanent;
}

It will get CORS disallow errors, some smart guys on the internet sugguest you should add this in order to make it works:

location ^~ blog/ {
	add_header Access-Control-Allow-Origin *;
	rewrite ^/blog/?(.*)$ https://blog.example.com/$1 permanent;
}

If it that won't again, do it in hard way, shown as below:

set $cors '';
if ($http_origin ~ '^https?://(localhost|www\.yourdomain\.com|www\.yourotherdomain\.com)') {
  set $cors 'true';
}

if ($cors = 'true') {
  add_header 'Access-Control-Allow-Origin' "$http_origin" always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
  # required to be able to read Authorization header in frontend
  #add_header 'Access-Control-Expose-Headers' 'Authorization' always;
}

if ($request_method = 'OPTIONS') {
	# Tell client that this pre-flight info is valid for 20 days
	add_header 'Access-Control-Max-Age' 1728000;
	add_header 'Content-Type' 'text/plain charset=UTF-8';
	add_header 'Content-Length' 0;
	return 204;
}

Now, It should work as the smart guys say it works for them.