If there are some special hooks were used, for example Notes<\/strong><\/p>\n\n\n\n Notes: just keep as it was<\/p>\n\n\n\n Create components for specific hooks If there are some special hooks were used, for example useSearchParams(), wrap it as a component, using suspense to load it. Ex: Set next.config.ts Notes Set package.json Notes: just keep as it was Run command to generate files (Optional) Rust web server setting<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1227","post","type-post","status-publish","format-standard","hentry","category-computer-science"],"yoast_head":"\nuseSearchParams()<\/code>, wrap it as a component, using suspense to load it. Ex:<\/p>\n\n\n\nimport { Suspense } from 'react';\nimport ChatComponent from '.\/ChatComponent';\n\nexport default function Page() {\n return (\n <div className=\"font-sans max-w-3xl mx-auto p-5\">\n <h1 className=\"text-2xl font-bold mb-4 text-center\">Yidam Chat<\/h1>\n <Suspense fallback={<div>Loading chat...<\/div>}>\n <ChatComponent \/>\n <\/Suspense>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\nSet next.config.ts<\/h2>\n\n\n\n
import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n \/* config options here *\/\n reactStrictMode: true,\n output: 'export',\n basePath: '\/web',\n};\n\nexport default nextConfig;<\/code><\/pre>\n\n\n\n\n
output: 'export'<\/code> for npm run build<\/code><\/li>\n\n\n\nbasePath: '\/web'<\/code> for the sub-directory of the web root<\/li>\n<\/ul>\n\n\n\nSet package.json<\/h2>\n\n\n\n
\"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },<\/code><\/pre>\n\n\n\nRun command to generate files<\/h2>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n(Optional) Rust web server setting<\/h2>\n\n\n\n
use axum::{\n routing::{get, get_service},\n Router,\n};\n\nasync fn main() {\n let state = Arc::new(AppState {\n context: Mutex::new(Vec::new()),\n });\n\n let app = Router::new()\n .route(\"\/ws\", get(websocket_handler))\n .nest_service(\"\/web\", get_service(ServeDir::new(\".\/src\/web\")))\n .with_state(state);\n const PORT: u16 = 3001;\n \/\/ get lan ip\n let listener = tokio::net::TcpListener::bind(format!(\"0.0.0.0:{}\", PORT)).await.unwrap();\n println!(\"Please open http:\/\/{}:{}\/web\", get_local_ip().unwrap(), PORT);\n axum::serve(listener, app).await.unwrap();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"