How can templ be Nextjs of Go?

[Jatin-MYST]

To A-H and Community,

I wanted to share some thoughts on using Go at our workplace.

We work with websites using Nextjs at the moment.
There is interest in using HTMX, GO, etc.
So, we recently had a discussion about migrating and adopting GO.

The biggest obstacle for us is the loss of JSX. (Specifically the ability to have logic and html in the same place)
It has the best DX for us. I don't know if its just us that feel that way.
Having JSX inside Go to template and create pages would make us jump ship.
Even if its SSR only.

That got me doing some testing to support JSX inside GO.
So, I built a basic transpiler that will convert limited JSX+GO to pure GO.

I bring this up here because Templ is the closest one to this at the moment. (AFAIK)
I wanted to share the idea in case there is ever Templ 2.0
JSX-like syntax support + file system router and maybe Templ can be Nextjs of GO

Thoughts? Please no hate. Valid discussion only.

Here is an example of the transpilation. It simply converts JSX components to Strings.
(Please overlook the bad code. This is just me playing around with the idea):

[RafaelZasas]

You can use go code within .templ files to handle logic.
Eg:

templ someComponent(isAdmin bool){
if isAdmin {
 <p> admin </p>
} else {
    <p>not admin</p>
  }
}

Same thing applies with looping using range or any other go code.

[Jatin-MYST]

Not quite what I meant. I would like to do something like this.
For example: when using file system routing, /user route is /user._ (custom file extension)
and it would contain code like this

func Index(params map[string]string) string {
  user := User.findById(params["id"])
  return <div>
    <p>{user.fullname}</p>
    <p>{user.email}</p>
  </div>
}

[dougbarrett]

@Jatin-MYST I would suggest looking at how to lean on context in this scenario:

https://templ.guide/syntax-and-usage/context/#using-context

then maybe the code could look something like:

func getUser(ctx context.Context) string {
	if user, ok := ctx.Value(userContextKey).(*model.User); ok {
		return user
	}
	return nil
}

templ Index() {
    <div>
        if getUser(ctx) != nil {
            <p>{ getUser(ctx).Fullname }</p>
            <p>{ getUser(ctx).Email }</p>
        }
    </div>
}

Maybe there's a better way of going around it, but my fear is that doing something like:

user := User.findById(params["id"])

would not be ideal because User would have to be a global variable which is frowned upon.

[Jatin-MYST]

Thanks for your suggestion @dougbarrett .
Context is certainly a way to do it but still... the DX isnt as good.
Having the ability to structure code like nextjs, svelte, etc would be amazing.

I am just saying this for any future plans for templ.
It would be good to have the great DX of Nextjs in Go.
Based on my limited testing, it works great and is feasible.

---

I am coming from nextjs land where User would be an imported model.
But yeah, by this

user := User.findById(params["id"])

I meant whatever the Go equivalent would be.

[a-h]

In Go, you can organise your project into packages.

./user/user.templ
./home/home.templ
./main.go

So... ./user/user.templ would be something like:

package user

type User struct {
  Name string
}

func FindByID(ctx context.Context, userID string) (u User, err error) {
  //TODO: Lookup in DB.
  return u, nil
}

templ View(u User) {
  <div>{ u.Name }</div>
}

In your ./home/home.templ you can import the user package.

package home

import "github.com/your-name/your-project/user"

type Model struct {
  User user.User
}

templ HomeView(hm Model) {
  <div>Home content</div>
  @user.View(hm.User)
}

func HomeHandler(w http.ResponseWriter, r *http.Request) {
  userID := "123" // Get from the querystring or session etc.
  user, err := user.FindByID(userID)
  // Skipped error handling.
  templ.Handler(HomeView(Model{User: user})).ServeHTTP(w, r)
}

Finally, main.go would set up routing, dependencies etc.

I think the relevant docs are:

• Project structure: https://templ.guide/project-structure/project-structure
• View models: https://templ.guide/core-concepts/view-models

If the docs aren't clear, then happy to update.