How To Host Your Next.js 14 SSR Website using AWS Amplify Hosting! (Multiple Subdomains too)

hosting your website isn't always straightforward and having each user have his own subdomain is not as easy either so in this video I'm going to show you step by step how you can host your nextjs website with subdomains and how you can put it all together using AWS amplify hosting and I really think this is the first step when you're creating a more of a complicated SAS app so I just want to show you this first step and show you how it works so leave a comment below if you like videos like this where I explain these Concepts and how to use different types of Hosting providers I think this is a fundamental step whenever you're creating a website so let's take a look I'm going to start by creating a brand new Next app I'll do at latest and this will just be for the subdomain project so I'm going to call it subdomains and I'll choose all the defaults okay so I'm going to change directories into it and we going to open up in the same window and we'll see it's just a normal uh next4 app I'm just going to do a Hello World from root okay so inside my app folder I'm going to create a new folder called users and then I'm going have one called username and then I'm going to create my pH just TSX file and inside here is where I'm going to have users if they go to a subname domain they're going to be the URL is going to be Rewritten and it's going to go into this user page. TSX file so let's let's just see if we can do a simple message on here so I'm going to import headers from next headers and let's just default a well we'll just default a function here we'll call it users and we'll call a header list headers and we'll have a host name equals header list.get and we'll get the host and so this should get the domain name we're on and then I'm just going to return NH H1 hello from sub domain host name here and I always like to do a little cleanup to uh so let's open up our CSS and I'll delete all this out of it we don't have too much here so let's run npm run Dev and take a look what it looks like okay so here it is Hello from rout not anything too special so our idea would be is when you go to a subdomain uh blah. subdomain that it would then work for you so right now it's it's obviously not doing anything so what we're going to do is I'm going to add in a new file so inside the source folder I'm going to create a new file called middleware dots and this file is where we're going to do a little bit of rewriting of some rules so to do that I'm going to copy this for my other screen be a little easier I'm going to paste it in and I'll show you what I'm I'm done so this right here at the top for a middleware it tells it which routes that this will uh match on so it'll match on everything except these paths so we have API NE static so it won't uh match on any of those paths so obviously we don't want someone to match on API route and then I'm doing a little bit of magic here where I'm grabbing the URL I'm grabbing that those headers again and then I'm grabbing the subdomain and what I'm doing is if it's Local Host then I'm just replacing it with nothing so in this if you're just on Local Host 3000 that's what this subdomain will be or this domain will be and so it'll replace it with nothing so I'm saying if it's www or nothing just go to the next response I can delete that here uh otherwise if it's not app so this would be whatever our domain name is then it's going to rewrite the URL so it's going to look at users and then the subdomain Main and it's going to uh route to that and that should be everything we need to get this working and otherwise if all else fails it just goes to the next one so we could try to test locally so after we add that in here you see now we have hello from subdomain blah. local host. 3000 one thing I like to do occasionally too when I'm testing subdomains is there's an Etsy hosts file if you're on a Windows or Mac machine uh I believe in Windows it's in a different location but there is a host file and what I can do here is I can add in some uh I can add in some redirects so in this case I can make my own domain called like Eric ddev and I can add it to the host file and I can have it redirect to 127.0 one and that kind of helps me when I'm just playing around with domain name so just a little tip there if you guys need to do that so the next thing we going to do is make sure that we have this in GitHub and then from here I'm going choose Eric I'm call it Wild Card YouTube well you know I'll make it public so I'll put it in this video create repository and then one thing I'd like to do is I'll just commit all this first commit so let's just copy and paste this and that should add and push everything to main now cool so if we refresh this right here now we have our app uh I have our metalware and should be good so now I want to go into the amplify console and I'm going to type in AWS amplify go to AWS amplify here I'm going to do uh I'm going to stick to USC one doesn't really matter I'm going to do new app and do host web app by the way if you are already know a little bit about amplify we just released this new Gen 2 feature which is a really neat way to create your back end and front end it sort of reminds me of cdk and SST uh I won't be showing you that today because it doesn't support custom domains and that's one thing you'll need to do to use this feature today so I'm going to do host web app it will in the future by the way it's just in developer preview but this one is not in developer preview hosting has been a while around for a while do GitHub here and it should automatically connect conect to my GitHub so if this is the first time doing it it'll pop up with a screen that asks you to uh set your authorization for GitHub I already did that beforehand and now I can check my Wild Card YouTube I'm do main I'll click next now it's going to Auto detect everything you need for your build settings one thing you will have to take a look at though is the build image itself so since we're using next4 it as of this recording it doesn't automatically detect next1 14 and it puts you in a build image that's not going to work work right so to do this correct you need to type in you can do this afterwards too amplify and then colon Al 223 and this will give you the latest Linux image that will work with next 14 so it's amplify Co a2023 I'm going to leave everything else I don't have any environmental variables or anything like that so I'm going to click next and we'll click save and deploy and what this is going to do is it's going to deploy it but after this we're going to use a custom domain so we can look at these Wild Card domains and see how that'll work so let's just take a moment and on this screen right here you see it's provisioning building deploying everything like that while it's doing this uh we're going to click on domain management and click on ADD domain so I can click uh I can I bought this domain recently tan. link it's a tan Oak is a type of tree and I'm going to click configure domain and I'm going to have it uh what I'm going to do here is I'm going to have it www.t o.l we'll go to the main branch you can do uh a star so everything else will also go to the main and then I'll do redirects from uh tan o. link to wwt o. link and if I bought this domain through Route 53 but if you didn't you can just type in a domain here and it'll give you instructions of how you can go into your registar and configure it so it'll work with this uh with amplify hosting so I'm click save here and so right now it's going to set up the SSL and configure it all for us uh you can look into so this will just take a a few moments adding the certificate and everything uh and then in a moment we'll be able to take a look at it okay so it's been a few minutes and you see the SSL is now configured now it's in this domain Activation so if we click a actions here view DNS records if we had this domain not on Route 53 we can it'll give you some instructions to add a c name but it should it automatically added it for us so we don't need to do that but this does sometimes take up to 24 hours for it to work so I'll just fast forward through that to see if it activates on this app you could see also if we go back to Wild Card uh YouTube here that it set up this kind of this fake website for us this kind of test domain for us to test it out it did um provision build and deploy so that's all set up and it is now connected to our GitHub so anytime we push changes to Main and it gets uh committed it will automatically trigger a new build which is uh really handy but if we click here we can see here is the domain it thinks that this main here is actually is a subdomain so this is the subdomain looking feel but let's see if we can look at it on tan o here in a second so from the power of editing we're going to show you what that look like all right so now if we look here it says it is now available uh everything is matched up for our tan oak. link if we go back to Wild Card subdomain here now we have the new URL here tan oak. link so let's click on it it's going to go and bring up the website I believe it will show you yep hello world from root now let's try a different subdomain so let's assume like let's say we have Eric here eric. tano. link cool so you can see here it went ahead and redirected to that eric. ten oak. link which is showing basically what's in the user route that we set up earlier I think this is really powerful having subdomains uh in up next video I can go deeper into this one thing that I've heard from people too is

Channel: Program With Erik

Views: 4,771

Keywords: Next.js hosting, Next.js hosting amplify, Next.js hosting AWS Amplify, AWS Amplify hosting, Next.js subdomains, Multiple Subdomains hosting, Subdomain hosting Next.js, Amplify Subdomain hosting

Id: 3v3Mhql630g

Length: 10min 59sec (659 seconds)

Published: Mon Dec 11 2023