Docs/Core Concepts/File-System Routing

File-System Routing

Build intuitive page hierarchies and nested layouts with file-system conventions inspired by the App Router.

In GoKS, the filesystem insideapp/is your router. Every directory represents a route segment, and special file conventions define the UI for that segment:

page.goxDefines the visible page component for a route
layout.goxWraps child pages and preserves state across navigations
not-found.goxDisplays custom 404 UI when no route matches

Root Layout & Metadata

The root layout inapp/layout.goxwraps every page in your application. It provides global document head tags, fonts, styles, and SEO defaults:

app/layout.gox
go
package app

import (
	"github.com/misbakhul29/goks/pkg/component"
	"github.com/misbakhul29/goks/pkg/metadata"
)

type Layout struct {
	component.ComponentBase
	Children component.Renderable
}

func (l *Layout) Metadata() metadata.Metadata {
	return metadata.Metadata{
		TitleTemplate: "%s | My Application",
		Description:   "Default site description",
	}
}

func (l *Layout) Render() *component.Node {
	return html.Html(html.Body(html.Nav("Navbar").Class("p-4 border-b"), component.Any(l.Children))).Attr("lang", "en")
}

Route Metadata Inheritance

Pages can define their ownMetadata()method. Child metadata merges automatically with parent layouts, replacing titles, keywords, OpenGraph tags, or canonical URLs seamlessly:

func (p *Page) Metadata() metadata.Metadata {
    return metadata.Metadata{
        Title:       "Dashboard",
        Description: "User analytics and activity.",
    }
}

Generating Pages via CLI

Quickly scaffold a new route folder and page component using the CLI:

goks page settings/billing
Powered byGoKS WASM16 topics