# Xnode NextJS Base Template

{% hint style="info" %}
In order to show how easy it is to leverage Xnode Studio, XnodeOS (forked NixOS) and bare metal server providers, we are working with the open source developer community to host hackathons where devs can submit their new app templates and get rewarded! Check out our [open source bounty platform called Open R\&D](https://openrd.openmesh.network/tasks) where you can complete development tasks to earn bounties! These tasks are created, reviewed and funds escrowed in alignment to our Openmesh hackathon initiatives! The first one was completed during the Openmesh Speedhack hackathon at the Chainlink SmartCon HK 2024 event.
{% endhint %}

### The Xnode NextJS Base Template

The NextJS base template is the foundational code needed to deploy your NextJS application locally and then onto Openmesh bare metal servers.

[Xnode NextJS Base Template - Github Repo](https://github.com/Openmesh-Network/xnode-nextjs-template)

<figure><img src="/files/O6Xfxq4IavQuI7djoQ2s" alt=""><figcaption></figcaption></figure>

This template is provided so you can make your NextJS app Xnode/Nix compatible.

### Base Template Modification Steps

1. Replace all instances of "xnode-nextjs-template" with the name of your project. This should be unique, as no apps with the same name can be run on a single Xnode.
2. Build your NextJS app
3. In case your npm dependencies change, run `nix run` in the root folder and replace the npmDepsHash in [package.nix](https://github.com/Openmesh-Network/xnode-nextjs-template/blob/main/nix/package.nix) with the got hash in the error.
4. Once your app is ready for deployment and runs using `nix run`, push to GitHub and copy your GitHub url (e.g. <https://github.com/Openmesh-Network/xnode-nextjs-template>).
5. Go the the App Store in [Xnode Studio](https://www.openmesh.network/xnode/app-store) and go to the advanced tab.
6. Paste your GitHub url and enter the name of the project you choose during step 1.
7. Hit deploy and wait for your app to be ready.
8. Copy the deploy link and replace the one click deployment url in the next section. (to allow others to easily deploy your application)

### One click deployment

<div align="left"><figure><img src="/files/I9ln2C0YS6BQnkGHIh66" alt=""><figcaption></figcaption></figure></div>

You can find the one click [deploy button at the Github repository readme page](https://github.com/Openmesh-Network/xnode-nextjs-template) (cannot embed the link within Gitbook). When you click it it will quickly deploy this NextJS Base Template to Xnode after you connect your wallet to Xnode Studio.

### Commands (in root folder)

```
nix run
```

### Commands (in nextjs-app)

```
npm i
npm run dev
npm run build
npm run start
```

### Deployment Tips

We are updating XnodeOS to use the latest NixOS features like Flakes. Therefore, if you have any errors that are Flake related please try the following nix run commands:

```
nix run --extra-experimental-features "nix-command flakes"
```

You can also update the \~/.config/nix/nix.conf file with the following to make it flakes permanent, so that the simple "nix run" will execute successfully:

```
experimental-features = nix-command flakes
```

### Openmesh Developer Community Forks

During our Openmesh developer community hackathons, we have already had submissions for other  NextJS base template [Forks](https://github.com/Openmesh-Network/xnode-nextjs-template/forks) that you can deploy on top of Openmesh. All community submissions are external to Openmesh (not on the official repo or supported). Please conduct your own due diligence on the code modifications from the base template.

* [Xnode NextJS Blog Template](https://github.com/johnforfar/xnode-nextjs-template) by [johnforfar](https://github.com/johnforfar)
* [Xnode NextJS Linktree Template](https://github.com/Arturou/xnode-nextjs-linktree) by [Arturou](https://github.com/Arturou)
* [Xnode NextJS Notion Template](https://github.com/elbarroca/OpenMesh__Blog_Speedaton) by [elbarroca](https://github.com/elbarroca)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openmesh.network/products/xnode/advanced-deployment-guides/xnode-nextjs-base-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.