#966 nextjs example template

browser/.gitignore

@@ -13,6 +13,7 @@ publish
 */yarn-error.log
 test-results
 playwright-report
+template-tests
 */nohup.out
 */yarn-error.log
 lib/coverage

browser/CHANGELOG.md

@@ -52,7 +52,9 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 
 ### @tomic/create-template
 
-- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update SvelteKit-site template to Svelte 5.
+- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update SvelteKit-site template to Svelte 5 and the new @tomic/svelte.
+- [#966](https://github.com/atomicdata-dev/atomic-server/issues/966) Add NextJS template.
+- [#993](https://github.com/atomicdata-dev/atomic-server/issues/993) Fix template not working when the drive subject has a path after the origin.
 
 ## [v0.40.0] - 2024-10-07
 

browser/Earthfile

@@ -1,6 +1,6 @@
 VERSION 0.7
 PROJECT ontola/atomic-server
-FROM node:20.8.0-bookworm
+FROM node:22.13-bookworm # LTS 
 WORKDIR browser
 
 all:

browser/cli/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tomic/lib": "workspace:*",
     "chalk": "^5.3.0",
+    "get-tsconfig": "^4.8.1",
     "prettier": "3.0.3"
   },
   "devDependencies": {

browser/cli/src/generateIndex.ts

@@ -1,5 +1,5 @@
 import { store } from './store.js';
-import { camelCaseify } from './utils.js';
+import { camelCaseify, getExtension } from './utils.js';
 import { atomicConfig } from './config.js';
 
 enum Inserts {
@@ -16,7 +16,7 @@ const TEMPLATE = `
 
 import { registerOntologies } from '${
   // Prevents a circular dependency
-  atomicConfig._ISLIB_ ? '../ontology.js' : Inserts.MODULE_ALIAS
+  atomicConfig._ISLIB_ ? `../ontology${getExtension()}` : Inserts.MODULE_ALIAS
 }';
 
 ${Inserts.IMPORTS}
@@ -57,4 +57,4 @@ export const generateIndex = (
 };
 
 const createImportLine = (name: string) =>
-  `import { ${name} } from './${name}.js';`;
+  `import { ${name} } from './${name}${getExtension()}';`;

browser/cli/src/utils.ts

@@ -1,3 +1,5 @@
+import { getTsconfig } from 'get-tsconfig';
+
 export const camelCaseify = (str: string) =>
   str.replace(/-([a-z])/g, g => {
     return g[1].toUpperCase();
@@ -6,3 +8,8 @@ export const camelCaseify = (str: string) =>
 export const dedupe = <T>(array: T[]): T[] => {
   return Array.from(new Set(array));
 };
+
+export const getExtension = () =>
+  getTsconfig()?.config.compilerOptions?.moduleResolution === 'Bundler'
+    ? ''
+    : '.js';

browser/create-template/src/index.ts

@@ -61,4 +61,6 @@ log('');
 log(chalk.green('Done!'));
 
 const endUsage = buildEndUsageString(args.values.template, args.positionals[0]);
-console.log(endUsage);
+log(endUsage);
+
+process.exit(0);

browser/create-template/src/templates.ts

@@ -24,6 +24,14 @@ const baseTemplates = {
 
 export const templates = {
   'sveltekit-site': baseTemplates.website,
+  'nextjs-site': {
+    ...baseTemplates.website,
+    generateEnv: ({ serverUrl }) => {
+      const siteSubject = `${serverUrl}/01j5zrevq917dp0wm4p2vnd7nr`;
+
+      return `NEXT_PUBLIC_ATOMIC_SERVER_URL=${serverUrl}\nNEXT_PUBLIC_WEBSITE_RESOURCE=${siteSubject}`;
+    },
+  },
 } satisfies Record<string, BaseTemplate>;
 
 export const isTemplate = (value: string): value is TemplateKey =>

browser/create-template/templates/nextjs-site/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

browser/create-template/templates/nextjs-site/README.md

@@ -0,0 +1,97 @@
+# Atomic Next.js Template
+
+This repository is a [Next.js](https://nextjs.org/) 15 website starter template to be used with [AtomicServer](https://github.com/atomicdata-dev/atomic-server). For specific steps on how to deploy this template, see [DEPLOYING](./README/deploying.md).
+
+## Getting started
+
+This guide assumes you have AtomicServer running on your local machine. If you don't, you can follow the [AtomicServer installation guide](https://docs.atomicdata.dev/atomicserver/installation).
+
+### 1. Create a new project
+
+```bash
+$ npm create @tomic/template my-project -- --template nextjs-site --server-url http://localhost:9883
+$ pnpm create @tomic/template my-project --template nextjs-site --server-url http://localhost:9883
+$ yarn create @tomic/template my-project --template nextjs-site --server-url http://localhost:9883
+```
+
+### 2. Generate ontologies
+
+```bash
+$ cd my-project
+```
+
+```bash
+$ npx ad-generate ontologies
+$ pnpm exec ad-generate ontologies
+$ yarn ad-generate ontologies
+```
+
+After making changes to an ontology you need to re-generate them in your code.
+
+### 3. Start the development server
+
+```bash
+$ npm run dev
+$ pnpm dev
+$ yarn dev
+```
+
+## Structure
+
+Atomic Data resources are rendered by views.
+These views are components that accept a resource as prop and render the data in a certain way.
+For example the `BlogPostFullPage` view renders a `blog-post` resource as a full page.
+
+Oftentimes these views also come with a kind of view selector component that determines what component to render based on the resources class.
+An example of this would be `FullPageView`.
+
+These selector components are great for when a resource can reference another resource without a classtype, meaning it can be any kind of resource.
+For example, the `page` class has a `blocks` property that can reference any type of resource.
+The FullPage view for the `page` class (`PageFullPage`) therefore renders a `BlockView` component that selects the appropriate component to render, i.e. a `TextBlock` or an `ImageGalleryBlock`.
+
+## Deploying
+
+### Deploying to Netlify
+
+#### Prerequisites
+
+- A [Netlify](https://www.netlify.com/) account
+- A Git repository with your template project
+
+#### UI
+
+1. Click on the "Add new site" button and select "Import an existing project".
+2. Choose your Git provider and select the repository where your project is located.
+3. Add the environment variables required by your project
+
+#### CLI
+
+1. Install the Netlify CLI by running `npm install -g netlify-cli`.
+2. Run `netlify login` and log in.
+3. Run `netlify init` and select the repository you want to deploy.
+4. Run `netlify deploy` to deploy the site.
+
+### Deploying to Vercel
+
+#### Prerequisites
+
+- A [Vercel](https://vercel.com/) account
+- A Git repository with your template project
+
+#### UI
+
+1. Click on the "Import Project" button and select the repository where your project is located.
+2. Add the environment variables required by your project.
+
+#### CLI
+
+1. Install the Vercel CLI by running `npm install -g vercel`.
+2. Run `vercel login` and log in.
+3. Run `vercel` and select the repository you want to deploy.
+4. Run `vercel --prod` to deploy the site to production.
+
+## Resources
+
+- [AtomicServer Docs](https://docs.atomicdata.dev/)
+- [Next.js Docs](https://nextjs.org/docs)
+- [Discord](https://discord.gg/a72Rv2P)

browser/create-template/templates/nextjs-site/atomic.config.json

@@ -0,0 +1,4 @@
+{
+  "outputFolder": "./src/ontologies",
+  "ontologies": ["<ONTOLOGY>"]
+}

browser/create-template/templates/nextjs-site/eslint.config.mjs

@@ -0,0 +1,10 @@
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat();
+
+/** @type {import('eslint').ESLint.ConfigData} */
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+];
+
+export default eslintConfig;

browser/create-template/templates/nextjs-site/next.config.mjs

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: config => {
+    config.resolve.extensionAlias = {
+      '.js': ['.ts', '.tsx', '.js'],
+    };
+
+    return config;
+  },
+};
+
+export default nextConfig;

browser/create-template/templates/nextjs-site/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "nextjs-site",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "update-ontologies": "ad-generate ontologies"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tomic/lib": "^0.40.0",
+    "@tomic/react": "^0.40.0",
+    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "modern-css-reset": "^1.4.0",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@tomic/cli": "^0.40.0",
+    "@types/node": "^20",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "15.0.2",
+    "typescript": "^5"
+  }
+}