Skip to content
This repository has been archived by the owner on Jul 26, 2022. It is now read-only.

Latest commit

 

History

History
79 lines (58 loc) · 2.57 KB

README.md

File metadata and controls

79 lines (58 loc) · 2.57 KB

Use shadow-cljs together with Next.js

The project allows you to define pages in with CLJS and Reagent and ouputs Next.js-compatible .js files.

Based on Thomas Heller's POC.

This README and the project is a work in progress.

Project structure

The CLJS files are located in the src/main directory.

The Next.js-compatible page files are stored as follows:

  • the files compiled from .cljs to .js in site/node_modules/shadow-cljs.

  • in site/pages, the JavaScript files that import the page definition function and supporting functions.

Next.js feature support

The generated Next.js application supports the following:

  • Custom _app definition

  • _app global style import support from aliased path

  • Support for per-page layout definition or no layout

  • Support for simple dynamic routes

  • Support for server-side rendering

  • Support for static generation of simple pages and dynamic routes

  • Next/Link & Next.js router

  • CLJS components (not tested)

  • Next/Image (not tested)

  • Next.js middleware (not attempted)

  • API routes (not attempted)

  • Localized routes (not attempted)

  • Localization libraries (not attempted)

  • Client-side rendering with SWR, React hooks (not attempted)

  • Re-frame

Start the app for development

To develop using this application:

  1. Click Use this template to create a repository based on the template.
  2. Clone the repository on your machine.
  3. Change the directory to your project directory and run the following commands:
  npm install
  npx shadow-cljs watch site
  1. In another terminal, start the development server for the Next.js app:
  cd site
  npm install
  npm run dev
  1. Open the browser to http://localhost:3000

Build the app

To build the app:

  1. In the root folder of your project run the following commands to compile optimized JavaScript files:
  npx shadow-cljs release site
  1. When done, build the Next.js app for production:
  cd site
  npm run build
  1. To inspect the production build, start the production server:
  npm run start
  1. Open the browser to http://localhost:3000