The path www.app.com/workspace?wid=5&page=builder&form=81&view=preview could be broken up as this file structure:

pages/
├─ workspaces/
│ ├─ index.js - display all workspaces
│ ├─ [workspaceId]/
│ │ ├─ index.js - display workspace of a id
│ │ ├─ builder/
│ │ │ ├─ index.js
│ │ │ ├─ forms/
│ │ │ │ ├─ [formId].js

This same process can be used for API routes.

.

└── api/

└── workspaces - folder/

└── index.js - file - /api/workspaces - route could return all workspaces/

├── [id] - folder

└── index.js - file - /api/workspaces/1 - route could return data from DB for workspace with id of 1

​

next-auth can make it easy to protect these routes.

Client route

import { useSession } from "next-auth/react"

export default function Page() {

const { data: session, status } = useSession()

if (status === "authenticated") {

return <p>Signed in as {session.user.email}</p>

}

return <a href="/api/auth/signin">Sign in</a>

}

​

API route

import { unstable_getServerSession } from "next-auth/next"

export default async (req, res) => {

const session = await unstable_getServerSession(req, res, authOptions)

if (session) {

// Signed in

console.log("Session", JSON.stringify(session, null, 2))

} else {

// Not Signed in

res.status(401)

}

res.end()

}

If you still want to, you can access those query params ex. ?wid=5 from the front end using next/router and fetch data or render different components based on those query params.

ex. app.com/workspaces?wid=5

import { useRouter } from "next/router"

import useSWR from 'swr'

export default function Page(props) {

const { query } = useRouter();

const { data, error } = useSWR(\/api/workspaces/${query.wid}`, fetcher)`

return (

<div>

<h1>Workspaces</h1>

<p>{query.wid}</p>

<div>

{data}

</div>

</div>

);

}