How to Use Next.js Frontend with Gin/Go Backend/Server?
Answered
Blue horntail woodwasp posted this in #help-forum
Blue horntail woodwaspOP
Question above. I have the following structure for my app:
How would I connect the two?
appDir
services
frontend (contains my Next.js app)
backend (contains my Go/Gin Backend)
How would I connect the two?
27 Replies
Sun bear
I would just use something like axios to make requests to your back end. Create a
Keep in mind, you will end up with two separate servers running: one for your Go/Gin api and one for your next.js server. Any
In this setup, your next.js server and go server would both be accessing your data layer independently - the next.js server just for any data that is needed to render pages, and the go server for any data needed for any of your api endpoints
client.js
file which initializes the axios client with a base url and any other configuration you need, then in a separate file, create a wrapper function for each endpoint you have which invokes that endpoint using the axios client you've createdKeep in mind, you will end up with two separate servers running: one for your Go/Gin api and one for your next.js server. Any
getServerSideProps
or getStaticProps
code you write will run on the next.js server and will need to be coded in javascript. This may mean you need to add javascript wrappers for your data layer on your next.js server as well if you need to access that data in order to render the pageIn this setup, your next.js server and go server would both be accessing your data layer independently - the next.js server just for any data that is needed to render pages, and the go server for any data needed for any of your api endpoints
@Sun bear I would just use something like axios to make requests to your back end. Create a `client.js` file which initializes the axios client with a base url and any other configuration you need, then in a separate file, create a wrapper function for each endpoint you have which invokes that endpoint using the axios client you've created
Keep in mind, you will end up with two separate servers running: one for your Go/Gin api and one for your next.js server. Any `getServerSideProps` or `getStaticProps` code you write will run on the next.js server and will need to be coded in javascript. This may mean you need to add javascript wrappers for your data layer on your next.js server as well if you need to access that data in order to render the page
In this setup, your next.js server and go server would both be accessing your data layer independently - the next.js server just for any data that is needed to render pages, and the go server for any data needed for any of your api endpoints
Blue horntail woodwaspOP
Thanks for the answer, but I am specifically looking for an answer that involves Go. This does not cut it.
I have been following this tutorial here but getting some errors: https://webapp.io/blog/nextjs-with-golang/
I'm also looking to use a Go framework, namely Gin, for my web app development. So I'm following this tutorial here: https://gin-gonic.com/docs/quickstart/
Oops let me be more specific.
When inside
...and getting the following error:
When inside
@/services/backend
I'm running the following in order to install the Gin framework for Go:go install github.com/gin-gonic/gin@latest
...and getting the following error:
package github.com/gin-gonic/gin is not a main package
Blue horntail woodwaspOP
Update: Managed to install the Gin framework, however, the last step in the "How to use NextJS with Golang" article I sent is incorrect; specifically, the way to connect the Next frontend with the Golang backend. There is no longer a
@/pages/index.js
. How do I fix this?Blue horntail woodwaspOP
Hey @B33fb0n3 are you online? I was hoping you could help me out with this
Blue horntail woodwaspOP
Okay my bad I won't do that again
Thats a nextjs + golang monorepo
https://github.com/Arinji2/garconia
Vite frontend + Golang backend + Discord.go monorepo
Vite frontend + Golang backend + Discord.go monorepo
I am working on a new project rn, you could also check that out
https://github.com/Arinji2/vocab-thing
cmd/api is the golang api
cmd/web is the nextjs website
This repo will also have a chrome and firefox extensions code which will be in cmd/extensions
It also has a sqlite setup with migrations from goose
https://github.com/Arinji2/vocab-thing
cmd/api is the golang api
cmd/web is the nextjs website
This repo will also have a chrome and firefox extensions code which will be in cmd/extensions
It also has a sqlite setup with migrations from goose
choose whatever you want
@Arinji i am quite literally your savior xD
Blue horntail woodwaspOP
You quite literally are my savior! Thanks a bunch 

I will go through these repos as fast as possible
@Blue horntail woodwasp I will go through these repos as fast as possible
Sure thing, I'm also learning go as well (been a year or so) so I am still trying to figure out how to structure my go apps specifically.
The newest repo I think has the best structure wrt a rest api
The newest repo I think has the best structure wrt a rest api
@Arinji Sure thing, I'm also learning go as well (been a year or so) so I am still trying to figure out how to structure my go apps specifically.
The newest repo I think has the best structure wrt a rest api
Blue horntail woodwaspOP
Have you used Next.js with the Go framework Gin?
@Blue horntail woodwasp Have you used Next.js with the Go framework Gin?
No.. I use the go chi router or just basic net/http
@Blue horntail woodwasp any updates?
@Arinji <@298938485677621280> any updates?
Blue horntail woodwaspOP
I will let you know if there is any, I had to spend the past two days doing some work as I had just come back from an international trip. I will mark as complete for now and update you if I have any questions.
Imma unfollow the post.. ping me if you have other questions
@Arinji Imma unfollow the post.. ping me if you have other questions
I sent the friend request.
I'd like to discuss about next.js
I'd like to discuss about next.js