I'm completely new to using Nextjs and want to learn it by building a project. I also want to use tRPC with it. I was reading the docs on using NextJS and tRPC and I learnt that there is a built in server in the /api under the pages folder. All the endpoints and server functions lives there.
I was wondering if I should be deploying all my server functions inside just the api folder or creating a separate custom Express server. It seems unscalable and weird to put all my server code into one client endpoint. To be clear I just want to do Authentication and CRUD functions but for future bigger projects, where such code would be split into microservices, would that then be deployed on a custom Express server instead?
I am learning web dev and I am planning on developing a simple web app using React: a decision matrix tool.
I need users to be able log in and save their matrices under their profile so I prefer to not use LocalStorage and thus learn more about databases. I am thinking of using JSON as the data format and I will also need to store basics user data for login and their profile.
I wonder how to tackle such a project since so far I have only been using GitHub Pages to host my static websites. Most of what I find by googling seems confusing or irrelevant for such a small-sized project.
My questions are:
What is the simplest way to store, access and edit JSON data as well as user data for a web app?
Are there any simple databases that can be “hosted” together with the app files on a server? Not sure if the question makes sense but I don’t understand where the database is.
What article or resource would you recommend to understand the concepts for data storage?
Ideally you would want to create a backend server using any language/framework e.g nodejs, java, django, php etc and expose the required data through APIs. But, if you don't want to create a separate backend app you can use Firebase database Firestore to save and fetch all of your required data. You can even use firebase hosting to deploy your app. Moreover, firebase also have their Authentication service which you can leverage for your app's authentication.
My website will perform CRUD operations and will work with MongoDB and Firebase storage+auth.
What are the reasons / advantages to developing a separate Express server instead of integrating everything in my next.js app?
As far as I have seen, it can all be done in my next.js app, but I still see many projects working with a separate server.
Depends on what your app does and how you are hosting it.
Running Next.Js on a standard server will be of little difference whether you are using nextjs's /api or expressjs.
However if you are hosting on serverless (e.g. Vercel), I would recommend using a separate express server if you have alot of CRUD operations because the warming up of serverless is really bad user experience.
Build and Deployment
Next/JS - If you want to edit something on the backend, and push the changes, it will require you to build the entire JS app, and depending on how big is your app, it can take alot of time (especially if alot of static generated pages).
Express - If you running express separately, you can build and deploy front end and backend separately. It's time saving, and you can also better organise your codes frontend/backend.
Choice of deployment
I have a choice to take advantage of Vercel to host my frontend, with static generated pages and some server side generated pages (automatic scaling, caching, CDN etc), and host my backend with a separate cluster of servers.
PS: I moved from single Next.JS app to NextJs+Express
I can think of a few things why they would have a different server from the one NextJS provides:
Familiarity with Express, Koa, etc. All next-connect helps with this
There is an already existing API in PHP, Express, Flask, etc.
It is literally based on what you would want to do, the extra interactions with MongoDB & Firebase would be same on both the technologies, unless you want to isolate respective things separately, I don't see any harm in doing everything together on next.
Given that the idea of using next.js, as per my understanding would be to utilise server side rendering.
I've been using Next.js with Typescript for quite a while now and I, as of now, have found one reason not to include express.js in my project. And the reason is Vercel.
Since I use Vercel for continuous deployment of my projects, and Vercel Not supporting any custom server as of there Docs here, I refrain from using Express or any other custom servers.
I didn't face any problem performing CRUD operations with MongoDB, can't say about firebase.
On Next.js Docs, I found these points to be considered:
A custom server can not be deployed on Vercel, the platform Next.js was made for.
A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.
But at the end of the day it very personal opinion weather to use a custom server or not. It might depend on a very specific use case you might be looking for.
Personally, I try to keep it to just NextJS, but if I have to manage real-time data with Socket.io, I get a separate server because other than WebSockets, serverless functions can do everything else.
I'm trying to host a database (on either AWS or Heroku) to store data from my web app. I also need to create an API to interact with the database. Basically, like this picture from Google.
Image source: https://dzone.com/articles/an-introduction-to-restful-apis
What I'm trying to figure out:
Is the API and database typically hosted separately? Or are they often hosted together? I'm not sure if the API and DB are together 1 component (with sub components being API and DB), or if they are 2 separate standalone components.
If they are 1 component and they can be hosted together, then I believe you can use something like Express.js for your API which can query the database and respond to HTTP requests from the website.
If they are 2 separately hosted components, I feel that means I have to have 2 APIs, unless my API can directly talk to the database (I'm not sure if this is proper). So I would need my API to talk to some server side technology (PHP, Java, etc.) which would then query the database and return result to the API. So basically my API is talking to an API which is talking to the database. I'm not sure if this is over complicating things, but it sure seems like it.
I'm trying to clarify how this process works.
Is the API and database typically hosted separately? Or are they often hosted together?
Since the API service needs to make lots of requests to the database, you want the minimum network lag possible between them.
So generally they should be hosted together. What that means depends on the style of hosting. Using the same cloud service makes sense if you are using something like AWS Lambda. Otherwise using the same machine for both the database and HTTP service until you scale to the point where you need to separate them.
If they are 1 component and they can be hosted together, then I believe you can use something like Express.js for your API which can query the database and respond to HTTP requests from the website.
This is a common approach.
I currently have a Single Page Application using( React+Redux+React-Router) hosted on firebase hosting. I want to implement server side rendering, for which I am aware I need to run a node/express server on something like Heroku, but I'm unclear how to do this. I have seen many starter boilerplates i.e Este that incorporate server-side-rendering but I want to add this capability to an existing Project. Somehow, The static content hosted on firebase should have access to my server but again unclear how to implement it so i can get al the benefits involved with SSR.
Since you are already using Firebase you can utilize Firebase functions.
Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method.
There is a good tutorial covering all the bits and pieces of this here
https://m.youtube.com/watch?v=82tZAPMHfT4