Next.js Discord

Discord Forum

How to Use Next.js Frontend with Gin/Go Backend/Server?

Answered
Blue horntail woodwasp posted this in #help-forum
Open in Discord
Blue horntail woodwaspOP
Question above. I have the following structure for my app:
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 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
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 @/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
@Blue horntail woodwasp
wassup
i am quite literally your savior xD
one sec
Answer
Thats a nextjs + golang monorepo
https://github.com/Arinji2/garconia
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
choose whatever you want
@Arinji i am quite literally your savior xD
Blue horntail woodwaspOP
You quite literally are my savior! Thanks a bunch :ARM1:
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
@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