urbitme/nextjs-urbit

Project template for Urbit apps using Next.js and Tailwind

Getting Started

Clone this repo and run:

npm install
# or
yarn

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000/apps/myappname with your browser to see the result.

Local Development

1. Setup and run a local fake Urbit ship containing your app, see the resources below for Urbit development guides.

2. Allow cross-origin requests on your ship. This project loads at localhost:3000 by default so run the following in your urbit dojo:

   |cors-approve 'http://localhost:3000'

3. Set the environment variables for your local ship in .env.development.local. Copy the example file from this project, or use the following example below. Adjust the values to match your local setup.

   NEXT_PUBLIC_URBIT_SHIP_NAME=zod
   NEXT_PUBLIC_URBIT_SHIP_URL=localhost:8080
   NEXT_PUBLIC_URBIT_SHIP_CODE=lidlut-tabwed-pillex-ridrup
   

4. Edit basePath in next.config.mjs to match your app name:

   const basePath = '/apps/myappname'

   You will need to visit localhost:3000/apps/myappname to view your app during development.

   There is a local only redirect setup for this url by default. If you do not like the warnings this generates, go ahead and remove it from next.config.mjs

Production Build

Build and export your project by running:

npm run build
# or
yarn build

This is a client side only app, so the server side features of Next.js are not supported, and next export is used in the build process. This document explains what features are supported with this approach:

• Next.js - Static HTML Export

Your project will be exported to out/ in the project directory. This is the client side bundle you will include in your app.

Glob the out/ directory following the instructions at: Urbit Developers - Glob

Learn More

To learn app development on Urbit, follow the guides here:

• Urbit Developers

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Support

You are welcome to bring questions and comments to ~nodreb-borrus on Urbit or 𝕏. Thank you for supporting urbit.me.