I initially developed my portfolio using React, but eventually decided to migrate it to NextJS. Now that the project is nearing completion, I am faced with the question of what to do with it next. It seems not all projects created with NodeJS can be uploaded to hosting platforms without proper support. So, does the hosting provider need to support NodeJS in order to upload a project? And is deploying NextJS different from CRA on a hosting platform?
As someone new to this field, I have a question regarding deployment. Suppose I have two local servers, one for a NextJS project and the other for an API. How can I deploy them separately on two different domains?
To deploy separate local servers on two different domains, one can use a VPS server and install Ubuntu and Nginx on it. Additionally, an SSL certificate can be obtained for free (e.g. Let's Encrypt) and the proxy address can be set up through Nginx to redirect traffic to internal services running on different ports.
While NodeJS may not be necessary for a finished build, it is required for server rendering. Options for hosting projects with NodeJS support include looking for platforms that offer this or purchasing a VPS. The latter option allows for greater flexibility in configuring the server as needed.
In order to run the project on the server, one can use the PM2 manager and have it run a server on localhost:3000. Then, using nginx, main requests can be sent to this port while requests with the prefix /api can be directed to the backend API.
To upload a website to web hosting, start by creating a database in the hosting control panel and importing the database from the hosting site into it via phpMyAdmin. Next, connect to the hosting via FTP and upload all of the site's files to the www or public_html folder, remembering to configure any necessary settings in configuration files.
In summary, the process involves purchasing hosting, creating a new database and possibly a user, importing the database to the hosting via phpMyAdmin, connecting to the hosting via FTP, and uploading the site files to the correct folder on the hosting, potentially configuring the configuration file beforehand if necessary.
If the website does not use a database, these steps can be skipped. For further guidance, video tutorials are available that demonstrate the process using a real website example.
To deploy your NextJS project, the hosting provider does need to support NodeJS. NextJS is a framework built on top of NodeJS, so the server-side rendering and API routes require NodeJS to run. Make sure to choose a hosting provider that offers NodeJS support.
Deploying NextJS is slightly different from Create React App (CRA) because NextJS provides server-side rendering capabilities out of the box. CRA is purely client-side rendering.
Regarding deploying two separate servers on different domains, you can follow these steps:
1. Build your NextJS project using the command `npm run build`.
2. Deploy the built files to your hosting provider's server using FTP or other file transfer methods supported by the hosting provider.
3. Configure your hosting provider to link your domain to the deployed NextJS project.
For the API server, you can follow a similar process:
1. Build your API server code using the appropriate build command, depending on the framework or technology you're using.
2. Set up a separate server or a cloud service (such as AWS, Google Cloud, or Heroku) to host your API.
3. Configure the server or cloud service to run your API code.
4. Link your domain to the API server so that it can be accessible via a different domain.
Remember to update your NextJS project to use the new API URL if it has changed due to the separate deployment of the API.
Here are some additional details on deploying NextJS and an API separately on different domains:
To deploy NextJS:
1. After building your NextJS project with `npm run build`, you will have a production-ready bundle of your application.
2. You can then use a static file hosting service like Vercel, Netlify, or GitHub Pages to deploy the built files directly. These platforms automatically handle server-side rendering and deployment configurations for NextJS projects.
3. Alternatively, you can deploy on a server that supports NodeJS applications, such as AWS Elastic Beanstalk, Google Cloud App Engine, or Heroku. Upload your built files to the server using FTP or other deployment methods supported by the hosting provider.
To deploy the API server:
1. If you have a separate API server, follow similar steps as you would for any backend application deployment.
2. Deploy your API code to a platform or server that supports your chosen backend technology. This could be a cloud service, a virtual private server (VPS), or a dedicated server.
3. Configure your API server to listen on a specific domain or port, and handle requests accordingly. You may need to configure DNS settings or reverse proxy configurations if you want to use a custom domain.
Your hosting provider must support Node.js to deploy a Next.js application effectively. Unlike Create React App (CRA), which can be served as static files, Next.js often requires a server for its features like API routes and server-side rendering. When deploying your Next.js app, consider platforms like Vercel or Heroku, which are optimized for Node.js.
If you have two local servers - one for Next.js and another for your API - you can deploy them on separate domains by configuring your DNS settings and using reverse proxy setups (like Nginx) to route traffic appropriately.