Documentation

Getting Started

Get up and running with Loly Framework in minutes.

Installation

Create a new Loly application using the Loly CLI:

npx @lolyjs/cli@latest my-app

This will create a new project with all the necessary files and dependencies. Navigate into your project directory:

cd my-app

Create Your First Page

Create a new page by adding a file to the app directory:

app/page.tsx

export default function Home() {
  return <h1>Hello, Loly!</h1>;
}

This creates a page at the root route /.

Server-Side Data

Fetch data on the server by creating a page.server.hook.ts file:

app/page.server.hook.ts

import type { ServerLoader } from "@lolyjs/core";

export const getServerSideProps: ServerLoader = async (ctx) => {
  const data = await fetchData();

  return {
    props: { data },
    metadata: {
      title: "Home Page",
      description: "Welcome to Loly",
    },
  };
};

Access the data in your component through props:

app/page.tsx

export default function Home({ props }: { props: { data: string } }) {
  return <h1>{props.data}</h1>;
}

Note: For layouts, use layout.server.hook.ts in the same directory as layout.tsx to provide stable props shared across all pages. Server hooks should only handle stable data that doesn't change frequently. For dynamic request-specific data (user sessions, locale, tenant context), use global.middleware.ts instead.

Example with Layout Server Hook:

app/layout.server.hook.ts

import type { ServerLoader } from "@lolyjs/core";

export const getServerSideProps: ServerLoader = async (ctx) => {
  // Data shared across all pages
  return {
    props: {
      appName: "My App",
      navigation: [
        { href: "/", label: "Home" },
        { href: "/about", label: "About" },
      ],
    },
  };
};

Development Server

Start the development server:

npm run dev

The server will run on http://localhost:3000 by default.

Next Steps

Now that you have Loly set up, explore the documentation to learn more: