feat(template): modernize runtime and tooling defaults (#309)

* feat(template): modernize runtime and tooling defaults

* Update next-template defaults & Biome config

Improve runtime defaults for create-sei's Next.js template and update Biome settings. Add a .changeset for a patch release.

Changes include:
- .env.example: clarify default chain behavior and example override (testnet).
- biome.json: include *.json and *.md in includes and add ignore patterns (node_modules, dist, .next, .yarn).
- Template adjustments: add a prebuild Biome check and include Biome in devDependencies; configure Next.js to allow Sei CDN images and skip ESLint during builds; update provider/shell setup and template docs/configs (README, Tailwind v4 config).

These updates align the template with current defaults and improve developer/runtime experience.

Author: codebycarson

.changeset/some-bags-tie.md

@@ -0,0 +1,10 @@
+---
+"@sei-js/create-sei": patch
+---
+
+Improve the `next-template` runtime defaults generated by `create-sei`.
+
+- Add a `prebuild` Biome check and include Biome in template dev dependencies.
+- Configure Next.js to allow Sei CDN images and skip ESLint during builds.
+- Update provider and shell setup for improved chain/image handling.
+- Align template config/docs with current defaults (`.env.example`, `README`, Biome, Tailwind v4 config).

packages/create-sei/.rsyncignore

@@ -2,8 +2,6 @@ node_modules/
 .next/
 dist/
 build/
-.yarn/
-yarn.lock
 package-lock.json
 .git/
 .DS_Store

packages/create-sei/templates/next-template/.env.example

@@ -1,6 +1,6 @@
 # Chain configuration
 # Options: mainnet, testnet, devnet
-# Defaults to testnet (atlantic-2) if not set
+# Defaults to mainnet if not set; this example overrides it to testnet
 NEXT_PUBLIC_CHAIN=testnet
 
 # WalletConnect Project ID (optional)

packages/create-sei/templates/next-template/.eslintrc.json

@@ -1,3 +1 @@
-{
-	"extends": "next/core-web-vitals"
-}
+{}

packages/create-sei/templates/next-template/README.md

@@ -4,17 +4,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 Install dependencies by running
 ```bash
-npm install
-#or
-yarn
+bun install
 ```
 
 Then, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
+bun run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/create-sei/templates/next-template/biome.json

@@ -1,7 +1,12 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-	"organizeImports": {
-		"enabled": true
+	"$schema": "https://biomejs.dev/schemas/2.4.5/schema.json",
+	"root": true,
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
 	},
 	"linter": {
 		"enabled": true,
@@ -20,8 +25,7 @@
 		"formatWithErrors": false,
 		"indentStyle": "tab",
 		"lineEnding": "lf",
-		"lineWidth": 160,
-		"attributePosition": "auto"
+		"lineWidth": 160
 	},
 	"javascript": {
 		"formatter": {
@@ -32,8 +36,12 @@
 			"arrowParentheses": "always",
 			"bracketSpacing": true,
 			"bracketSameLine": false,
-			"quoteStyle": "single",
-			"attributePosition": "auto"
+			"quoteStyle": "double"
+		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
 		}
 	},
 	"json": {
@@ -42,7 +50,7 @@
 		}
 	},
 	"files": {
-		"include": ["src/**/*.ts", "src/**/*.tsx", "*.json", "*.md"],
+		"includes": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.css", "*.json", "*.md"],
 		"ignore": ["node_modules/**", "dist/**", ".next/**", ".yarn/**"]
 	}
 }

packages/create-sei/templates/next-template/next.config.mjs

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+	eslint: {
+		// Linting is handled by Biome — skip ESLint during builds.
+		ignoreDuringBuilds: true,
+	},
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "cdn.sei.io",
+			},
+		],
+	},
+};
 
 export default nextConfig;

packages/create-sei/templates/next-template/package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
+		"prebuild": "biome check .",
 		"build": "next build",
 		"start": "next start",
 		"lint": "biome lint .",
@@ -35,6 +36,7 @@
 		"wagmi": "^2.16.4"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "^2.4.5",
 		"@types/node": "^24.3.0",
 		"@types/react": "^19.1.10",
 		"@types/react-dom": "^19.1.7",

packages/create-sei/templates/next-template/src/app/globals.css

@@ -1,14 +1,16 @@
+@import "tailwindcss";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@theme {
+	--color-sei-red: #9e1f19;
+	--color-sei-dark: #1a1a1a;
+}
 
 @layer base {
-  html {
-    @apply h-full;
-  }
-  
-  body {
-    @apply h-full bg-gray-50 text-gray-900 antialiased;
-  }
+	html {
+		@apply h-full;
+	}
+
+	body {
+		@apply h-full bg-gray-50 text-gray-900 antialiased;
+	}
 }

packages/create-sei/templates/next-template/src/components/providers/providers.tsx

@@ -1,28 +1,47 @@
-'use client';
+"use client";
 
-import { MantineProvider } from '@mantine/core';
-import { Notifications } from '@mantine/notifications';
-import { RainbowKitProvider, connectorsForWallets, lightTheme } from '@rainbow-me/rainbowkit';
-import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { type ReactNode, useMemo } from 'react';
-import { http, WagmiProvider, createConfig } from 'wagmi';
+import { MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import { connectorsForWallets, lightTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode, useMemo } from "react";
+import { createConfig, http, WagmiProvider } from "wagmi";
 
-import '@rainbow-me/rainbowkit/styles.css';
-import { sei, seiDevnet, seiTestnet } from 'viem/chains';
+import "@rainbow-me/rainbowkit/styles.css";
+import { defineChain } from "viem";
+import { sei, seiTestnet } from "viem/chains";
+
+const seiDevnet = defineChain({
+	id: 713715,
+	name: "Sei Devnet",
+	nativeCurrency: { name: "Sei", symbol: "SEI", decimals: 18 },
+	rpcUrls: {
+		default: {
+			http: ["https://evm-rpc-arctic-1.sei-apis.com"],
+		},
+	},
+	blockExplorers: {
+		default: {
+			name: "Seitrace",
+			url: "https://seitrace.com",
+		},
+	},
+	testnet: true,
+});
 
 const queryClient = new QueryClient();
 
 const connectors = connectorsForWallets(
 	[
 		{
-			groupName: 'Recommended',
+			groupName: "Recommended",
 			wallets: [metaMaskWallet],
 		},
 	],
 	{
-		appName: 'Sei dApp',
-		projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || 'your-project-id',
+		appName: "Sei dApp",
+		projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "your-project-id",
 	}
 );
 
@@ -33,11 +52,11 @@ interface ProvidersProps {
 export default function Providers({ children }: ProvidersProps) {
 	// Chain selection via environment variable, defaults to sei mainnet
 	const getSelectedChain = () => {
-		const chainName = process.env.NEXT_PUBLIC_CHAIN || 'mainnet';
+		const chainName = process.env.NEXT_PUBLIC_CHAIN || "mainnet";
 		switch (chainName.toLowerCase()) {
-			case 'testnet':
+			case "testnet":
 				return seiTestnet;
-			case 'devnet':
+			case "devnet":
 				return seiDevnet;
 			default:
 				return sei;
@@ -68,14 +87,14 @@ export default function Providers({ children }: ProvidersProps) {
 					<Notifications />
 					<RainbowKitProvider
 						theme={lightTheme({
-							accentColor: '#9E1F19',
-							accentColorForeground: 'white',
-							borderRadius: 'medium',
-							fontStack: 'system',
+							accentColor: "#9E1F19",
+							accentColorForeground: "white",
+							borderRadius: "medium",
+							fontStack: "system",
 						})}
 						appInfo={{
-							appName: 'Sei dApp',
-							learnMoreUrl: 'https://docs.sei.io/learn/wallets',
+							appName: "Sei dApp",
+							learnMoreUrl: "https://docs.sei.io/learn/wallets",
 						}}
 						modalSize="compact"
 						initialChain={chain.id}