nice URLs with SvelteKit
Tags: svelte, webdev, beginners, tutorial
Published: 2023-03-02 23:25:51

## TL;DR

If you want URLs like these:  
- for topics:   
  ```
  awesome.app/best-topic-in-the-world--t5173
  ```

- for user: 
  ```
  awesome.app/sherlock-holmes--u5173
  ```

Then your routes folder has to look like this:

```
routes/
│   
├─[topic]--t[id]/
│ ├─ +page.server.ts
│ └─ +page.svelte
│   
└─ [user]--u[id]/
   ├─ +page.server.ts
   └─ +page.svelte
```

## Unique URLs
One of the most important properties of a URL is its uniqueness. For our examples, this is technically relatively easy to implement, since each topic and each user in the database also has a unique ID. Mostly this is achieved with a consecutive number. But it can also be a string of random letters and numbers. Theoretically it can also be the name of the topic or the user, but then there must not be two topics or users with the same name, otherwise the uniqueness is no longer given.

For example, URLs can look like this:

- for topics: `awesome.app/topic/5173`
- for user: `awesome.app/user/5173`

Technically okay, but when we see the link, we would like to know a bit more about what awaits us behind it.


## Advanced routing in SvelteKit 
SvelteKit has an [advanced routing](https://kit.svelte.dev/docs/advanced-routing) documentation, but the closest approach to my case is this:

> If the folder is enclosed with square brackets, this part of the URL is available as a parameter.   

So this folder structure: 

```
routes/
│   
├─ topic/
│  └─ [id]/ 
│     ├─ +page.server.ts
│     └─ +page.svelte
└─ ...
```
Will give us the the `id` from the URL inside the `+page.server.ts` files:

```javascript
// routes/topic/+page.server.ts
export const load = (async ({ params }) => {
  console.log('topic id: ', params.id)

  // prisma example
  const topic = await prisma.topic.findUnique({
    where: {id: parseInt(params.id)} 
  })
  return { topic: topic }
}
```
And we can use an URL like this: `awesome.app/topic/5173`


But what could be more obvious than to combine the information for the human and the information for the server?   
This method is by far nothing new in the internet, but for SvelteKit I didn't find any examples of it in the [documentation](https://kit.svelte.dev/docs).


## The sensation

> ### This method also works with multiple parameters in one folder name!

```
routes/
│ 
├─ [topic]--t[id]/
│ 
└─ [user]--u[id]/
```

So if we divide our human--server URL by a unique string (`--t` or `--u` in this example), we get two parameters for one route.  

The first one is for readability and the second one is for the database query. What is in the first parameter doesn't matter at all for processing on the server, as long as our separator is not included.  

Now we can use URLs like this: `awesome.app/best-topic-in-the-world--t5173` and get two parameters inside the `+page.server.ts` 

```javascript
// routes/[topic]--t[id]/+page.server.ts
export const load = (async ({ params }) => {
  console.log('topic id: ', params.id)
  console.log('topic slug: ', params.topic)
}

// output
// topic id:  "5173"                       <- always a string!
// topic slug: "best-topic-in-the-world"   <- usecase?
```

> ### Happy advanced Routing with SvelteKit

Disclaimer:    
*I wrote this article a few weeks ago. In the meantime the SvelteKit Docs got some more examples, but not exactly this case.*

Any constructive feedback is welcome :-)