Add support for next config basePath

.changeset/healthy-horses-sin.md

@@ -0,0 +1,5 @@
+---
+"next-ws": minor
+---
+
+Add support for next config `basePath`

examples/_shared/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "shared",
+  "private": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./chat-room": {
+      "types": "./dist/chat-room/index.d.ts",
+      "import": "./dist/chat-room/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "postinstall": "pnpm build"
+  },
+  "dependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8"
+  }
+}

examples/_shared/src/chat-room/index.ts

@@ -0,0 +1,3 @@
+export * from './message-list';
+export * from './message-submit';
+export * from './messaging';

examples/chat-room-with-custom-server/app/chat/_shared/message-list.tsx → examples/_shared/src/chat-room/message-list.tsx

@@ -1,4 +1,4 @@
-import type { Message } from './message';
+import type { Message } from './messaging';
 
 export function MessageList({ messages }: { messages: Message[] }) {
   return (

examples/chat-room-with-custom-server/app/chat/_shared/message-submit.tsx → examples/_shared/src/chat-room/message-submit.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback } from 'react';
-import type { Message } from './message';
+import type { Message } from './messaging';
 
 export function MessageSubmit({
   onMessage,
@@ -21,7 +21,7 @@ export function MessageSubmit({
       // Reset the content input (only)
       const contentInputElement = event.currentTarget //
         .querySelector<HTMLInputElement>('input[name="content"]');
-      contentInputElement.value = '';
+      if (contentInputElement) contentInputElement.value = '';
     },
     [onMessage],
   );

examples/chat-room/app/chat/_shared/websocket.ts → examples/_shared/src/chat-room/messaging.ts

@@ -1,25 +1,24 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { Message } from './message';
+import { useCallback, useEffect, useState } from 'react';
+import { useWebSocket } from '../websocket';
+
+export interface Message {
+  author: string;
+  content: string;
+}
 
 export function useMessaging(url: () => string) {
-  const ref = useRef<WebSocket>(null);
-  const target = useRef(url);
+  const socket = useWebSocket(url);
 
   const [messages, setMessages] = useState<Message[]>([]);
 
   useEffect(() => {
-    if (ref.current) return;
-    const socket = new WebSocket(target.current());
-    ref.current = socket;
-
     const controller = new AbortController();
 
-    socket.addEventListener(
+    socket?.addEventListener(
       'message',
       async (event) => {
-        console.log('Incoming event:', event);
         const payload =
           typeof event.data === 'string' ? event.data : await event.data.text();
         const message = JSON.parse(payload) as Message;
@@ -29,7 +28,7 @@ export function useMessaging(url: () => string) {
       controller,
     );
 
-    socket.addEventListener(
+    socket?.addEventListener(
       'error',
       () => {
         const content = 'An error occurred while connecting to the server';
@@ -38,7 +37,7 @@ export function useMessaging(url: () => string) {
       controller,
     );
 
-    socket.addEventListener(
+    socket?.addEventListener(
       'close',
       (event) => {
         if (event.wasClean) return;
@@ -49,14 +48,17 @@ export function useMessaging(url: () => string) {
     );
 
     return () => controller.abort();
-  }, []);
-
-  const sendMessage = useCallback((message: Message) => {
-    if (!ref.current || ref.current.readyState !== ref.current.OPEN) return;
-    console.log('Outgoing message:', message);
-    ref.current.send(JSON.stringify(message));
-    setMessages((p) => [...p, { ...message, author: 'You' }]);
-  }, []);
+  }, [socket]);
+
+  const sendMessage = useCallback(
+    (message: Message) => {
+      if (!socket || socket.readyState !== socket.OPEN) return;
+      console.log('Outgoing message:', message);
+      socket.send(JSON.stringify(message));
+      setMessages((p) => [...p, { ...message, author: 'You' }]);
+    },
+    [socket],
+  );
 
   return [messages, sendMessage] as const;
 }

examples/_shared/src/index.ts

@@ -0,0 +1 @@
+export * from './websocket';

examples/_shared/src/websocket.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export function useWebSocket(url: () => string) {
+  const ref = useRef<WebSocket>(null);
+  const target = useRef(url);
+  const [, update] = useState(0);
+
+  useEffect(() => {
+    if (ref.current) return;
+    const socket = new WebSocket(target.current());
+    ref.current = socket;
+    update((p) => p + 1);
+
+    return () => socket.close();
+  }, []);
+
+  return ref.current;
+}

examples/_shared/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
+
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+
+    "allowArbitraryExtensions": false,
+    "allowImportingTsExtensions": false,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+
+    "declaration": true,
+    "declarationMap": true,
+    "importHelpers": false,
+    "newLine": "lf",
+    "noEmitHelpers": true,
+    "removeComments": false,
+    "sourceMap": true,
+
+    "experimentalDecorators": true,
+    "lib": ["DOM", "ESNext"],
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+
+    "outDir": "./dist",
+    "paths": { "~/*": ["./src/*"] },
+
+    "jsx": "preserve"
+  }
+}

examples/chat-room-with-custom-server/app/chat/simple/page.tsx → examples/base-path/app/(simple)/page.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { MessageList } from '../_shared/message-list';
-import { MessageSubmit } from '../_shared/message-submit';
-import { useMessaging } from '../_shared/websocket';
+import { MessageList, MessageSubmit, useMessaging } from 'shared/chat-room';
 
 export default function Page() {
   const [messages, sendMessage] = useMessaging(
-    () => `ws://${window.location.host}/chat/simple/socket`,
+    () => `ws://${window.location.host}/some-base-path/api/ws`,
   );
 
   return (

examples/base-path/next.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  basePath: '/some-base-path',
+};

examples/base-path/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@examples/base-path",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "start": "next start",
+    "dev": "next dev",
+    "prepare": "next-ws patch"
+  },
+  "dependencies": {
+    "next": "15.2.3",
+    "next-ws": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shared": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8"
+  }
+}

examples/base-path/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig.json",
+
+  "include": ["app/**/*", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".next"],
+
+  "compileOnSave": true,
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+
+    "allowArbitraryExtensions": false,
+    "allowImportingTsExtensions": false,
+    "allowJs": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "resolvePackageJsonExports": true,
+    "resolvePackageJsonImports": true,
+
+    "declaration": true,
+    "declarationMap": true,
+    "importHelpers": false,
+    "newLine": "lf",
+    "noEmit": true,
+    "noEmitHelpers": true,
+    "removeComments": false,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+
+    "experimentalDecorators": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+
+    "jsx": "preserve",
+    "outDir": "./dist",
+    "paths": { "~/*": ["./src/*"] },
+
+    "plugins": [{ "name": "next" }],
+    "incremental": true
+  }
+}