Getting Hands-on with Blazor, Next.js and Vercel

// Home.razor
@if (_resume == null)
{
    <h1>Loading...</h1>
}
else
{
    <PageTitle>@Resume.Name</PageTitle>
}

@code {
    private Resume? _resume;

    protected override async Task OnInitializedAsync()
    {
        _resume = await Http.GetFromJsonAsync<Resume>("data/wheeler-resume.json");
    }
}

// MainLayout.razor
<CascadingValue Value="@_resume">
  @Body
</CascadingValue>

// Home.razor
@code {
    [CascadingParameter]
    public MainLayout.Resume Resume { get; set; } = null!;
}

// index.html
<script type="text/javascript">
    window.BrowserServiceGetDimensions = function () {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        };
    };
</script>

// BrowserService.cs
using Microsoft.JSInterop;

public class BrowserService
{
    private readonly IJSRuntime _js;

    public BrowserService(IJSRuntime js)
    {
        _js = js;
    }

    public async Task<BrowserScreenSize> GetScreenSize()
    {
        var dimensions = await GetDimensions();
        return dimensions.Width switch
        {
            >= 1024 => BrowserScreenSize.Desktop,
            >= 768 => BrowserScreenSize.Tablet,
            _ => BrowserScreenSize.Mobile
        };
    }

    private async Task<BrowserDimension> GetDimensions()
    {
        return await _js.InvokeAsync<BrowserDimension>("BrowserServiceGetDimensions");
    }
}

public class BrowserDimension
{
    public int Width { get; set; }
    public int Height { get; set; }
}

public enum BrowserScreenSize
{
    Desktop,
    Mobile,
    Tablet,
}

// SocialFooter.razor
@code {
    [Parameter]
    public MainLayout.ResumeUrl[] Urls { get; set; } = null!;

    private MainLayout.ResumeUrl[]? _urls;

    protected override async Task OnParametersSetAsync()
    {
        _urls = await GetUrlsForScreen();
    }

    private async Task<MainLayout.ResumeUrl[]> GetUrlsForScreen()
    {
        var screen = await Browser.GetScreenSize();
        return screen switch
        {
            BrowserScreenSize.Tablet => Urls.Take(7).ToArray(),
            BrowserScreenSize.Mobile => Urls.Take(5).ToArray(),
            _ => Urls
        };
    }
}

private async Task ScrollToFragment()
{
    var uri = new Uri(NavigationManager.Uri, UriKind.Absolute);
    var fragment = uri.Fragment;
    if (fragment.StartsWith('#'))
    {
        // Handle text fragment (https://example.org/#test:~:text=foo)
        // https://github.com/WICG/scroll-to-text-fragment/
        var elementId = fragment[1..];
        var index = elementId.IndexOf(":~:", StringComparison.Ordinal);
        if (index > 0)
        {
            elementId = elementId.Substring(0, index);
        }
        if (!string.IsNullOrEmpty(elementId))
        {
            await JsRuntime.InvokeVoidAsync("NavAnchorScrollToId", elementId);
        }
    }
}

* Output Directory

* Install Command

### <a name="vercel-1"/> Storage

Maybe that would've been sufficient. Except I accidentally learned about [Vercel Storage](https://vercel.com/docs/storage). Did you know that Vercel has free storage offerings like Redis, Postgres, and Blob? I sure didn't know that. Once I did, I had the crazy idea to enhance this application with a share feature. 

I thought it would be interesting for other people to be able to upload their own resume (based on my format) and re-generate the page dynamically. It was easy enough to change the source of the resume in the code. It was much harder to persist that data permanently so that I could recall it with a unique URL.

![Blazor App Test User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b61ocnevo7qg07fygsn9.png)

Because the data uploaded could omit literally any field, I had to cover my bases in the code with lots of null checks. Now the user can choose which fields to retain, and the sections on the page will disappear like magic. 

![Blazor App Unknown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ph7nteovmfa5odu4de.png)
> Resume = {}

When importing a JSON, I am saving it in Vercel Blob storage with a unique ID. Then provide a share URL that can be used to reload that same resume. For example, [https://cgc-resume-from-json.vercel.app/?id=f87791d3-c359-42e8-8be2-067ce54a2e20](https://cgc-resume-from-json.vercel.app/?id=f87791d3-c359-42e8-8be2-067ce54a2e20). 

With this feature, even non-technical people could leverage this site for their own virtual resume without writing any code! 
> JSON is not code. 😶

### <a name="vercel-2"/> Security

Uploading to the Vercel Blob service required some critical thinking. Originally, I didn't want to build a backend for this project. I was pretty fixed on the frontend only. 

Unfortunately, it had to be done. You may not know this, but there is absolutely no secure way to protect sensitive keys like the `BLOB_READ_WRITE_TOKEN`, in a client side app. A sophisticated hacker can find that data.

---

## <a name="nextjs"/> Next.js

Did you know that Vercel created [Next.js](https://nextjs.org/)? Well, I didn't. That is, until I tried to navigate the Vercel documentation. I have never felt pressured  to use a specific technology like the way Vercel pressured me to use Next.js. All of their documentation pointed towards it. Trying to use any other technology seemed like I was on my own. 

It was at this pivotal point that I had a decision to make. 
* Do I jump into Next.js, a framework I've never used, for the ease of documentation and integration?
* Do I struggle through the documentation and implementation with a backend framework or language that I already know?

Since I would be struggling in either scenario, I chose to dive into Next.js. I've heard the splash it's made in the community and thought it would be a great learning opportunity. 

One more quick course on Pluralsight to ramp up.

* [Next.js 12: The Big Picture](https://app.pluralsight.com/library/courses/nextjs-12-big-picture/table-of-contents) by [Cory House](https://www.linkedin.com/in/coryhouse/)

### <a name="nextjs-1"/> API

I got started with `npx create-next-app@latest` to scaffold the project. Then I deleted all the files that I didn't need and created a `pages/api` directory to hold the API code.

> Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size. [Docs](https://nextjs.org/docs/pages/building-your-application/routing/api-routes)

For this simple app, I only required a single TypeScript file, [blob.ts](https://github.com/wheeleruniverse/cgc-resume-from-json/blob/main/app/pages/api/blob.ts), with two methods to `GET` and `PUT`. 

The `putBlob` function accepts the resume data as the request body in JSON format and uploads the file to Vercel Blob storage using the [SDK](https://vercel.com/docs/storage/vercel-blob/using-blob-sdk). 

The `getBlob` function accepts the unique id as a query parameter and uses that to pull a single blob from the `list` method.

### <a name="nextjs-2"/> Deployment

With the end in sight, one last battle. I created a [monorepo](https://vercel.com/blog/monorepos) to improve organization. I didn't want to clutter my GitHub with several disjointed repositories for the same small project.

![Monorepo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6syjskr2odkgsd9v8pul.png)

I couldn't see any clear way to manipulate the "Build & Development Settings" on a per-directory basis. I did see that they had "Root Directory" support at the project level, though. I created another Vercel project for the same GitHub repository. Then I adjusted the "Root Directory" for both projects. 

![Vercel Projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n82jceta867454dw28sf.png)

At least since I opted to use Next.js, the presets worked to get the app up.

![Vercel API Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huomyik14doyacb6rxpd.png)

---

## <a name="retrospective"/> Retrospective

Looking back, I actually learned a lot. Now I've used Blazor, Next.js, and Vercel. Before I started this journey, I hadn't touched any of them before.

With that said, I don't think that I would go this route again. I was able to stitch these components together like a baby Frankenstein monster, but I don't necessarily recommend it. 

To save yourself the headaches I suffered,
* [Deploy Blazor to Azure](https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-blazor)
* If you want to use Vercel, then use Next.js

I would encourage you to check out the website for yourself. Maybe share it with your friends and colleagues. I would love any brutally honest feedback. [https://cgc-resume-from-json.vercel.app/](https://cgc-resume-from-json.vercel.app/)

As always if you liked this content, maybe you would like to [Buy Me a Coffee](https://www.buymeacoffee.com/wheeleruniverse) or connect with me on [LinkedIn](https://www.linkedin.com/in/wheeleruniverse/).