+
+
+# 🐉 HERE BE DRAGONS 🐉
+
+Val is currently in beta - the API can be considered relatively stable, but expect some features to be broken and the UX to be changing.
+
+Join us on [discord](https://discord.gg/cZzqPvaX8k) to get help or give us feedback.
+
+## Table of contents
+
+- [Installation](./packages/next/README.md#Installation)
+- [Introduction](#content-as-code)
+- [Examples](#examples)
+- [Documentation](#documentation)
+
+## Content as code
+
+Val is a CMS library where **content** is **TypeScript** / **JavaScript** files stored in your git repo.
+
+As a CMS, Val is useful because:
+
+- editors can **change content** without having to ask developers to do it for them (and nobody wants that)
+- a **well-documented** way to **structure content**
+- **image**, **richtext**, ... support is built-in
+- built-in **visual editing** which lets editors click-then-edit content (and therefore **code**!) directly in your app
+ 
+- an embedded studio which lets editors navigate the content structure and make updates there
+ 
+
+
+Definition: editor
+An editor in this context, is a non-technical person that edits content in your application (technical writer, proof-reader, legal, ...).
+
+
+
+
+But, with the benefits of **hard-coded** content:
+
+- works seamlessly **locally** or with git **branches**
+- content is **type-checked** so you can spend less time on figuring out why something isn't working
+ 
+- content can be refactored (change names, etc) just as if it was hard-coded (because it is)
+ 
+- works as normal with your **favorite IDE** without any plugins: search for content, references to usages, ...
+ 
+- **no** need for **code-gen** and extra build steps
+- **fast** since the content is literally hosted with the application
+- content is **always there** and can never fail (since it is not loaded from somewhere)
+- no need to worry about **caching** since content is not fetched from some DB or cloud service
+- no need to manage different **environments** with different versions of content
+- works out of the box with Vercel **preview links**
+- **resolve conflicts** like you normally resolve conflicts: **in git**
+
+Compared to other CMSs, Val has the following advantages:
+
+- **easy** to _grok_: Val is designed to have a minimum of boilerplate and there's **0** query languages to learn
+- Vals abstraction model is based on **JSON** and TypeScript (Record, keyof). What this means is that there is nothing to learn (for you or your future colleagues): no "a collection is..." or a "a document is sort of a..." - just JSON and regular TypeScript types
+- **no signup** required to use it locally
+- **no fees** for content that is in your code: your content is your code, and your code is... yours
+- **minimal** API surface: Val is designed to not "infect" your code base
+- **easy to remove**: since your content is already in your code and Val is designed to have a minimal surface, it's easy to remove if you want to switch
+- eslint rules and [VS Code extension](https://marketplace.visualstudio.com/items?itemName=valbuild.vscode-val-build) for an even **better-than-hard-coded** developer experience
+
+
+Upcoming feature: i18n
+Val will soon have support for i18n. Follow this repository to get notified when this is the case.
+
+
+
+Upcoming feature: remote content
+Having hard-coded content is great for landing pages, product pages and other pages where the amount of content is manageable.
+
+However, checking in the 10 000th blog entry in git might feel wrong (though we would say it is ok).
+
+Therefore, Val will add `remote content` support which enables you to seamlessly move content to the cloud and back again as desired.
+You code will still be the one truth, but the actual content will be hosted on [val.build](https://val.build).
+
+`.remote()` support will also make it possible to have remote images to avoid having to put them in your repository.
+
+There will also be specific support for remote i18n, which will make it possible to split which languages are defined in code, and which are fetched from remote.
+
+More details on `.remote()` will follow later.
+
+
+
+## When to NOT use Val
+
+Val is designed to work well on a single web-app, and currently only supports Next 14+ (more meta-frameworks will supported) and GitHub (more Git providers will follow).
+
+Unless your application fits these requirements, you should have a look elsewhere (at least for now).
+
+In addition, if you have a "content model", i.e. content schemas, that rarely change and you plan on using them in a lot of different applications (web, mobile, etc), Val will most likely not be a great fit.
+
+If that is the case, we recommend having a look at [Sanity](https://sanity.io) instead (we have no affiliation, but if we didn't have Val we would use Sanity).
+
+**NOTE**: Our experience is that, however nice it sounds, it is hard to "nail" the content model down. Usually content (on, for example, your landing page) is derived from what you want to present, not vice-versa. In addition, you should think carefully whether you _really_ want to present the exact same content on all these different surfaces.
+
+
+ Upcoming feature: external content
+Val will support external content, i.e. content from other Val projects, CMSs or DBs some time in the future.
+
+
+## Examples
+
+Examples can found [here](./examples).
+
+## Documentation
+
+Val currently only support Next.js.
+
+To get started using Next.js, checkout the [README](./packages/next/README.md).
diff --git a/babel.config.js b/babel.config.js
index fb119885f..9d6167918 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,5 @@
+/** @type {import("@babel/core").TransformOptions} */
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-typescript"],
+ babelrcRoots: [".", "./packages/*"],
};
diff --git a/examples/next/.eslintrc.json b/examples/next/.eslintrc.json
index bffb357a7..1465c36cc 100644
--- a/examples/next/.eslintrc.json
+++ b/examples/next/.eslintrc.json
@@ -1,3 +1,3 @@
{
- "extends": "next/core-web-vitals"
+ "extends": ["next/core-web-vitals", "plugin:@valbuild/recommended"]
}
diff --git a/examples/next/.gitignore b/examples/next/.gitignore
index c87c9b392..c65e12938 100644
--- a/examples/next/.gitignore
+++ b/examples/next/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
+
+# Val
+.val
\ No newline at end of file
diff --git a/examples/next/.nvmrc b/examples/next/.nvmrc
new file mode 120000
index 000000000..15bb0fb5b
--- /dev/null
+++ b/examples/next/.nvmrc
@@ -0,0 +1 @@
+../../.nvmrc
\ No newline at end of file
diff --git a/examples/next/README.md b/examples/next/README.md
index c87e0421d..2a36ba4af 100644
--- a/examples/next/README.md
+++ b/examples/next/README.md
@@ -1,34 +1,22 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Val NextJS example
-## Getting Started
+This is a Next JS project with Val enabled.
-First, run the development server:
+## File structure
-```bash
-npm run dev
-# or
-yarn dev
-```
+The following files are required in Val NextJS project:
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- `/val.config.ts` - this is the main Val config file
+- `/val.modules.ts` - defines the modules that are editable by Val
+- `/app/(val)/api/val/[[...val]]/route.ts` - all API call to Val goes via these endpoints
+- `/app/(val)/val/[[...val]]/page.tsx` - this is the URL to the Val full-screen app
+- `/val/server.ts` - this is the helper library for server related functions
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+Additionally the following files are needed:
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+- `/val/client.ts` - this is the helper library for **Client Components**
+- `/val/rsc.ts` - this is the helper library for **React Server Components**
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+### Content
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out the `.val.ts` files where content is defined to learn more.
diff --git a/examples/next/app/(val)/api/val/[[...val]]/route.ts b/examples/next/app/(val)/api/val/[[...val]]/route.ts
new file mode 100644
index 000000000..186769d7e
--- /dev/null
+++ b/examples/next/app/(val)/api/val/[[...val]]/route.ts
@@ -0,0 +1,8 @@
+import { valNextAppRouter } from "../../../../../val/server";
+
+export const GET = valNextAppRouter;
+export const POST = valNextAppRouter;
+export const PATCH = valNextAppRouter;
+export const DELETE = valNextAppRouter;
+export const PUT = valNextAppRouter;
+export const HEAD = valNextAppRouter;
diff --git a/examples/next/app/(val)/val/[[...val]]/page.tsx b/examples/next/app/(val)/val/[[...val]]/page.tsx
new file mode 100644
index 000000000..f93c371c8
--- /dev/null
+++ b/examples/next/app/(val)/val/[[...val]]/page.tsx
@@ -0,0 +1,6 @@
+import { ValApp } from "@valbuild/next";
+import { config } from "../../../../val.config";
+
+export default function Val() {
+ return ;
+}
diff --git a/examples/next/app/[locale]/blog/[blog]/en-us.val.ts b/examples/next/app/[locale]/blog/[blog]/en-us.val.ts
new file mode 100644
index 000000000..85d9ffb0a
--- /dev/null
+++ b/examples/next/app/[locale]/blog/[blog]/en-us.val.ts
@@ -0,0 +1,20 @@
+import { c } from "../../../../val.config";
+import { schema } from "./schema.val";
+
+export default c.define("/app/[locale]/blogs/[blog]/en-us.val.ts", schema, {
+ "/en-us/blogs/my-page": {
+ title: "My page",
+ author: "freekh",
+ content: [
+ {
+ tag: "p",
+ children: ["English content"],
+ },
+ ],
+ link: {
+ href: "/",
+ label: "Home",
+ },
+ translation: "/nb-no/blogs/min-side",
+ },
+});
diff --git a/examples/next/app/[locale]/blog/[blog]/nb-no.val.ts b/examples/next/app/[locale]/blog/[blog]/nb-no.val.ts
new file mode 100644
index 000000000..ddedfd7be
--- /dev/null
+++ b/examples/next/app/[locale]/blog/[blog]/nb-no.val.ts
@@ -0,0 +1,20 @@
+import { c } from "../../../../val.config";
+import { schema } from "./schema.val";
+
+export default c.define("/app/[locale]/blogs/[blog]/nb-no.val.ts", schema, {
+ "/nb-no/blogs/min-side": {
+ title: "Min side",
+ author: "thoram",
+ content: [
+ {
+ tag: "p",
+ children: ["Norsk innhold"],
+ },
+ ],
+ link: {
+ href: "/",
+ label: "Hjem",
+ },
+ translation: "/en-us/blogs/my-page",
+ },
+});
diff --git a/examples/next/app/[locale]/blog/[blog]/page.tsx b/examples/next/app/[locale]/blog/[blog]/page.tsx
new file mode 100644
index 000000000..d48bb231c
--- /dev/null
+++ b/examples/next/app/[locale]/blog/[blog]/page.tsx
@@ -0,0 +1,45 @@
+"use server";
+import { notFound } from "next/navigation";
+import { fetchVal, fetchValRoute } from "../../../../val/rsc";
+import Link from "next/link";
+import authorsVal from "../../../../content/authors.val";
+import { ValRichText } from "@valbuild/next";
+import enVal from "./en-us.val";
+import nbVal from "./nb-no.val";
+import { Blog } from "./schema.val";
+import translationsVal from "./translations.val";
+
+export default async function BlogPage({
+ params,
+}: {
+ params: Promise<{ blog: string; locale: string }>;
+}) {
+ const { locale } = await params;
+ const translations = await fetchVal(translationsVal);
+ const blog = await fetchValRoute([enVal, nbVal], params);
+
+ const authors = await fetchVal(authorsVal);
+ if (!blog) {
+ return notFound();
+ }
+ const author = authors[blog.author];
+ return (
+
;
+}
+```
+
+Missing infrastructure: none in particular.
+
+## remote
+
+Remote makes it possible to move content to cloud storage (and back again). It uses immutable references, so local work, branches still works.
+
+Example:
+
+```tsx
+// file: ./blogs.val.ts
+
+export const schema = s
+ .array(s.object({ title: s.string(), text: s.richtext() }))
+ .remote();
+
+export default c.define(
+ "/blogs",
+ schema,
+ c.remote("4ba7c33b32a60be06b1b26dff8cc5d8d967660ab"), // a change in content, will result in a new reference
+);
+
+// file: ./components/ServerComponent.ts
+
+import blogsVal from "./blogs.val";
+
+export async function ServerComponent({ index }: { index: number }) {
+ const blog = await fetchVal(
+ blogVal[index], // only fetch the blog at index
+ );
+ const title = blog.title;
+ return