I’ve been itching to learn Go for a while because the mascot is so cute! I’ve also heard that this language is supposed to be “easy”. I had the opportunity when I had to verify if a file contains any non UTF-8 characters by creating a simple script!

# Go: UTF-8 Validator

I’ve been itching to learn Go for a while because the mascot is so cute! I’ve also heard that this language is supposed to be “easy”. I had the opportunity when I had to verify if a file contains any non UTF-8 characters by creating a simple script!

## First Draft

I tried the “Guided Learning” feature of Google Gemini to help me build this. I am already familiar to the basic syntax by learning it at [boot.dev](http://boot.dev), and I found it pretty helpful. It would not give me easy answers which was annoying, but it did force me to look stuff up myself and actually learn 😛

The flow of the program:

1. Read CLI arguments to get the specified filename
2. Open the specified filename
3. Read the file by chunks, loop through it until it’s the end
4. Exit on file reading error, exit on finding UTF-8 chars
5. Exit with success message if no UTF-8 chars is found

```go
package main

import (
	"fmt"
	"io"
	"os"
	"unicode/utf8"
)

func main() {
	// get filename from 2nd arg (first is the path to go build)
	filename := os.Args[1]

	// get the stream open, and exit if err exists
	file, err := os.Open(filename)

	if err != nil {
		fmt.Println("Error opening file", filename, err)
		os.Exit(1)
	}
	
	defer file.Close()

	// 1kb memory alloc
	bytes := make([]byte, 1024)

	// store the position
	var offset int64 = 0

	for {
		bytesRead, err := file.ReadAt(bytes, offset)

		// check for end of file
		if err == io.EOF {
			fmt.Println("Reached End of File")
			break
		}

		if err != nil {
			fmt.Println("Error reading file")
			os.Exit(1)
			return
		}

		if !utf8.Valid(bytes[:bytesRead]) {
			fmt.Println("Invalid UTF-8 detected!")
			os.Exit(1)
			return
		}

		// increase the offset
		offset += int64(bytesRead)
	}

	fmt.Println("File is UTF-8 valid :)")
}
```

In this program, we had to allocate the memory manually by using `make([]byte, 1024)`, which provides the space for the data to be read from `file.ReadAt`. The loop will read 1kb of data every loop, and check if that chunk has any non UTF-8 chars. In the end, we also increase the offset to make sure we are not re-reading the same chunk over and over again.

The slice `bytes` does not *accumulate* - it is only used as a buffer on every loop to dump the data read from `file.ReadAt`. We also need to check `utf8.Valid()` with only the the total `bytesRead` of the slice, because the last chunk might be 500 bytes, and the whole slice is 1024, hence we don’t need to read the last 524 bytes.

While this might work most of the time, there are conditions where this program would fail. If a non UTF-8 char is split between the first 1kb and the second 1kb, the program might not pick up this failure.

## Second Draft

```go
package main

import (
	"bufio"
	"fmt"
	"io"
	"os"
	"unicode"
)

func main() {
	// get filename from 2nd arg (first is the path to go build)
	filename := os.Args[1]

	// get the stream open, and exit if err exists
	file, err := os.Open(filename)

	if err != nil {
		fmt.Println("Error opening file", filename, err)
		os.Exit(1)
	}

	defer file.Close()

	reader := bufio.NewReader(file)

	for {
		r, _, err := reader.ReadRune()

		if err != nil {
			// check for end of file
			if err == io.EOF {
				fmt.Println("Reached End of File")
				break
			}

			fmt.Println("Error reading rune:", err)
			os.Exit(1)
			return
		}

		if r == unicode.ReplacementChar {
			fmt.Println("File Invalid, a non UTF-8 character found")
			os.Exit(1)
			return
		}
	}

	fmt.Println("File is UTF-8 valid :)")
}
```

In this version, we discarded the manual memory allocation and handover all the buffer management to the `bufio` package, buffered IO. We just need to make a new Bufio reader with `bufio.NewReader()`, and use the reader to read the every character (Rune) and see if it’s invalid.

However, this can be further made efficient by scanning per line instead of per character.

## Draft 3

```go
func main() {
	// get filename from 2nd arg (first is the path to go build)
	filename := os.Args[1]

	// get the stream open, and exit if err exists
	file, err := os.Open(filename)

	if err != nil {
		fmt.Println("Error opening file", filename, err)
		os.Exit(1)
	}

	defer file.Close()

	scanner := bufio.NewScanner(file)

	// loop through every line returned after .Scan()
	for scanner.Scan() {
		lineBytes := scanner.Bytes()

		if !utf8.Valid(lineBytes) {
			fmt.Println("Invalid UTF-8 detected on a line!")
			os.Exit(1)
		}
	}

	scanErr := scanner.Err()

	if scanErr != nil {
		fmt.Println("Error during scanning:", scanErr)
		os.Exit(1)
	}

	fmt.Println("File is UTF-8 valid :)")
}
```

In this version, instead of checking the validity per Rune which could be costly in larger and larger files, we check per line. This is done by the `bufio.NewScanner()`.  The `scanner.Scan()` will not return error if it’s an `io.EOF` (end of file), and the errors can be accessed through `scanner.Err()`. But what if I want to point out the row and column?

## Final Version

In this final version, I wanted to record the row and column. This would be better for debugging purposes, so users can know *where* the problem lies if the file contains any non UTF-8 characters. To know where the row/column of a failing character, the file needs to be processed rune by rune, so we will use the approach of the 2nd draft with some tweaks.

```go
package main

import (
	"bufio"
	"fmt"
	"io"
	"os"
	"unicode"
)

func main() {
	// get filename from 2nd arg (first is the path to go build)
	filename := os.Args[1]

	// get the stream open, and exit if err exists
	file, err := os.Open(filename)

	if err != nil {
		fmt.Println("Error opening file", filename, err)
		os.Exit(1)
	}

	defer file.Close()

	reader := bufio.NewReader(file)

	// start at 1, because humans use 1-based indexing
	rows := 1
	cols := 1

	for {
		r, _, err := reader.ReadRune()

		if err == io.EOF {
			break
		}

		if err != nil {
			fmt.Println("Error reading file:", err)
			os.Exit(1)
			return
		}

		if r == unicode.ReplacementChar {
			fmt.Println("Non UTF-8 char found at row:", rows, "and column:", cols)
			return
		}

		if r == '\n' {
			rows++
			cols = 0 // 0, because will be incremented at the end of the loop :)
		}

		cols++
	}

	fmt.Println("File is UTF-8 valid :)")
}
```

We just added some logic to keep track if which rune we are checking using `rows` and `cols` :) To make it more solid, let’s add some tests to it.

## Final Version 2

To make testing easier, we need to separate the core logic from `main()` to its own function - I named it `checkFileIsValid()`. This allows us to more easily test this program, as we don’t need to do any mocking/test the file reading mechanism (`os.Args[1]`, and the `os.Open()`).

```go
package main

import (
	"bufio"
	"errors"
	"fmt"
	"io"
	"os"
	"unicode"
)

func checkFileIsValid(file *os.File) (isValid bool, message string, err error) {
	reader := bufio.NewReader(file)

	// start at 1, because humans use 1-based indexing
	rows := 1
	cols := 1

	for {
		r, _, err := reader.ReadRune()

		if err == io.EOF {
			break
		}

		if err != nil {
			errMessage := fmt.Sprintln("Error reading file: ", err)
			return false, "", errors.New(errMessage)
		}

		if r == unicode.ReplacementChar {
			errMessage := fmt.Sprintln("Non UTF-8 char found at row:", rows, "and column:", cols)
			return false, errMessage, nil
		}

		if r == '\n' {
			rows++
			cols = 0 // 0, because will be incremented at the end of the loop :)
		}

		cols++
	}

	return true, "File is UTF-8 valid :)", nil
}

func main() {
	// get filename from 2nd arg (first is the path to go build)
	filename := os.Args[1]

	// get the stream open, and exit if err exists
	file, err := os.Open(filename)

	if err != nil {
		fmt.Println("Error opening file", filename, err)
		os.Exit(1)
	}

	defer file.Close()

	_, message, err := checkFileIsValid(file)

	if err != nil {
		// something gone wrong
		fmt.Println(err)
		os.Exit(1)
	}

	// print out final message
	fmt.Println(message)
}
```

Take note, our new function `checkFileIsValid` returns `(isValid bool, message string, err error)`, however the `isValid` is not used in this program. This is intentional. I could just remove the `isValid`, but I think this function can be used in the future and returning `isValid` will be useful in other ways. For example, check the validity of the file, and if it’s valid, we save it to our cloud storage. Good practice on writing Go functions!

So - for the test, Go has its own testing package. We can create a file that ends in `_test.go`, and test the function by adding a `TestXxx`, where `Xxx` is the function that we want to test. Let’s write our first test.

```go
// main_test.go
package main

import (
	"os"
	"testing"
)

func TestCheckFileIsValid(t *testing.T) {

	// get the stream open, and exit if err exists
	file, err := os.Open("valid.txt")

	if err != nil {
		t.Errorf("Error opening file. %s", err)
	}

	defer file.Close()

	isValid, message, err := checkFileIsValid(file)

	if err != nil {
		t.Errorf("%s", err)
	}

	// test for invalid checks to fail
	if !isValid || message != successMessage {
		t.Errorf("Expected isValid: true, received: %v\nExpected message: %s, received: %s", isValid, successMessage, message)
	}
}
```

This works! You can test it by running `go test`. If any tests fail, it will be printed. Try this out by changing `!isValid` to `isValid`.

Now, we need to add other tests to fully test the function. Instead of copying and pasting the same test over and over, we can use something called a [Table Driven Tests](https://www.notion.so/Using-Go-to-find-non-UTF-8-string-2693c260db46808bbc44f6b5d00c0176?pvs=21). We make a `struct` for the test case, and a `map` to have different named tests.

```go
const successMessage = "File is UTF-8 valid :)"
// these have \n, because the function returns a fmt.Println() string
const invalidFirstRowMessage = "Non UTF-8 char found at row: 1 and column: 13\n"
const invalidMessage = "Non UTF-8 char found at row: 102 and column: 13\n"

type testCase struct {
	fileName        string
	isValid         bool
	expectedMessage string
	expectedErr     error
}

var tests = map[string]testCase{
	"valid file": {
		fileName:        "valid.txt",
		isValid:         true,
		expectedMessage: successMessage,
		expectedErr:     nil,
	},
	"invalid first row": {
		fileName:        "invalid-first-row.txt",
		isValid:         false,
		expectedMessage: invalidFirstRowMessage,
		expectedErr:     nil,
	},
	"invalid in > 1st row": {
		fileName:        "invalid.txt",
		isValid:         false,
		expectedMessage: invalidMessage,
		expectedErr:     nil,
	},
	"invalid filename": {
		fileName:        "wrong-filename.txt",
		isValid:         false,
		expectedMessage: "",
		expectedErr:     errors.New("test error"),
	},
}
```

In the `tests["invalid filename"].expectedErr` , I put in `errors.New("test error")`. This error can be anything as long as it’s not `nil`, because we can test the `err` based on whether it’s `nil` or not.

To test with the map, we can just loop through it like this:

```go
func TestCheckFileIsValid(t *testing.T) {
	// loop through the tests
	for name, test := range tests {
		t.Run(name, func(t *testing.T) {
			file, err := os.Open(test.fileName)

			if err != nil {
				// fail if it's not meant to error out
				if test.expectedErr == nil {
					t.Errorf("Expected expectedErr value: %s, got: %s", test.expectedErr, err)
				}
			}

			if err == nil && test.expectedErr != nil {
				t.Errorf("Expected expectedErr value: %s, got: %s", test.expectedErr, err)
			}

			defer file.Close()

			isValid, message, err := checkFileIsValid(file)

			if err != nil {
				// fail if it's not meant to error out
				if test.expectedErr == nil {
					t.Errorf("Unexpected error. %s", err)
				}
			}

			if isValid != test.isValid {
				t.Errorf("Expected %v, got %v", test.isValid, isValid)
			}

			if message != test.expectedMessage {
				t.Errorf("Expected %s, got %s", test.expectedMessage, message)
			}

		})
	}
}
```

And that’s it! This is the *final* final version, I promise!

## Future Improvements

I think a good improvement would give like an extra option to record all instances of non UTF-8 characters through the use of a flag (e.g. `--all`). I also realised maybe I can refactor the test - maybe remove the check for `error` and `expectedErr`? Because this does not really test the *function* only, it also tests the opening if invalid filename.

## Closing Thoughts

Nothing much to say other than I had fun creating this! It works, and now I can officially add Golang to my CV 😛 I’m kidding, but it has been really fun! The error as value forces me to handle error on every step, and also pushes me to return errors in functions that I write if there are any failure points.

Table Driven Testing was interesting, and it felt intuitive, too. I wanted to say it is similar to Data Attributes in PHPUnit testing. They use different data in same structures to verify the different test results. I know you can run these tests in parallel too!

Working with a statically typed language is a nice refresher after mainly working with JS and PHP. And the walrus operator - I still can’t get over it! :=)

Go: UTF-8 Validator

Decided to join Advent of Code as an excuse to practise my Rust!

# Advent of Code: Day 1 & 2
After a couple of months since completing the `minigrep` program in Rust from the [Rust Book](https://doc.rust-lang.org/book/ch12-00-an-io-project.html), I wanted to get my hands dirty. I tried to rawdog writing a compiler to, shockingly, absolutely no success. With [Advent of Code](https://adventofcode.com/), I thought it’s a good excuse to practice my rusty Rust and refresh my super basic Rust skills.
## Day 1
### Part 1
The solution itself was quite simple, but it took me around 2 hours just to get it working, because I forgot all the syntax and data types and what not. This is my first draft:

```rust
use std::fs;

fn main() {
    // list 1 and list 2
    // pair up the numbers in ascending order, and find the distance between them
    // then, add all the numbers

    // 1. load input (txt?)
    // 2. loop through, assign left, then right; list1, then list2
    // 3. sort line1 and line2
    // 4. compare per index, total each diff into a tmp var
    // 5. return tmp var

    let input = fs::read_to_string("input.txt").unwrap();

    let mut line1: Vec<i32> = vec![];
    let mut line2: Vec<i32> = vec![];

    for line in input.lines() {
        let tmp: Vec<&str> = line.split("   ").collect();
        line1.push(tmp[0].parse().unwrap());
        line2.push(tmp[1].parse().unwrap());
    }

    line1.sort();
    line2.sort();

    let mut result: i32 = 0;
    for (i, x) in line1.iter().enumerate() {
        let line2 = &line2[i];
        if x >= line2 {
            result += x - line2;
        } else {
            result += line2 - x;
        }
    }

    println!("{}", result);
}
```

And it worked! I did not care much about error handling at the time; my primary focus was to get a correct, working code. There are a couple of things I realised I can do better afterwards, such as replacing `.split("   ")` to `.split_whitespace()`. Another is using `result += x.abs_diff(line2)` instead of the cursed `if else` statement to not get a negative number.
### Part 2
The only difference in part 2 is during the looping through. Add another loop to “collect” multipliers, and adding `multiplier * x` to the `result` 

```rust
    // snip
    let mut result: i32 = 0;
    for x in line1.iter() {
        // loop through line2 until no more of same number
        let mut multiplier: i32 = 0;
        for (j, y) in line2.iter().enumerate() {
            if x == y {
                multiplier += 1;
            }
            // end of loop
            if j == line2.len() - 1 {
                result += multiplier * x;
                multiplier = 0;
            }
        }
    }
    // snip
```
## Day 2
On Day 2, I wanted to mess with *proper* error handling (at least more thought out than in Day 1). I also wanted to measure how long the execution time is. Luckily, we can do this quite easily with Rust!

```rust
let start = Instance::now();
// code to be executed here...
let duration = start.elapsed();
println!("{}", duration);
```
### Part 1
For Day 2, I wanted to keep both solutions in one `cargo` project, compared to two when I was doing Day 1. This way, I only need to write the logic for reading the input data once. I also wanted to type `cargo run <input file>` to be able to run between the test data and real input data.

```rust
use core::panic;
use std::{env, fs, process, time::Instant};

fn main() {
    // input is one report per line
    // report = line (y-value)
    // levels = columns (x-value)
    // count how many reports are safe!
    // safe can be based on:
    // 1. each report must be constantly increasing/decreasing (can't look like /\)
    // 2. delta is 1 <= d <= 3
    // 3. if delta == 0, it's unsafe

    let start = Instant::now();
    let filename: Vec<String> = env::args().collect();

    if filename.len() < 2 {
        eprintln!("Error: no filename detected. Please enter filename.");
        process::exit(1);
    }

    let input = match fs::read_to_string(&filename[1]) {
        Ok(string) => string,
        Err(_) => {
            panic!("Can't read file. Please make sure file exists.")
        }
    };

    // let res = part1(input);
    let res = part2(input);
    println!("total: {}", res);

    let duration = start.elapsed();
    println!("time elapsed: {:?}", duration);
}
```

I know, I know.. I still have to change the code manually to run day 1 vs day 2 code. This could be extended in Day 3 perhaps - `cargo run <input> <day>`

For Part 1, the solution was again, quite straightforward, though longer than Day 1. This forced me (especially due to part 2) to break up my code into functions - like how it should be!

```rust
pub fn part1(input: String) -> i32 {
    let mut total_safe = 0;

    for line in input.lines() {
        let row: Vec<&str> = line.split_whitespace().collect();
        let res = check_if_safe(&row);

        if res {
            total_safe += 1;
        }
    }
    return total_safe;
}

pub fn check_if_safe(row: &Vec<&str>) -> bool {
    let mut delta_is_positive = true;
    let mut safe = true;

    for (j, x) in row.iter().enumerate() {
        // logic starts after index 0
        if j > 0 {
            let cur_value = x.parse::<i32>().unwrap();
            let prev_value = row[j - 1].parse::<i32>().unwrap();
            let delta = cur_value - prev_value;
            let delta_diff = delta.abs_diff(0);

            if delta_diff < 1 || delta_diff > 3 {
                safe = false;
                break;
            }

            if delta == 0 {
                safe = false;
                break;
            } else if delta > 0 {
                if j > 1 {
                    if delta_is_positive == false {
                        safe = false;
                        break;
                    }
                }
                delta_is_positive = true;
            } else {
                if j > 1 {
                    if delta_is_positive == true {
                        safe = false;
                        break;
                    }
                }
                delta_is_positive = false;
            }
        }
    }

    return safe;
}
```

Upon copy/pasting the code to Notion right now, I just realised that I could probably remove the `safe` variable in `check_if_safe` function and replacing the `break` with an early `return false` , returning `true` by default if no early returns are called. +1 learning!

Writing the solution in Day 2 also forced me to think more about passing by reference or by value to functions. The compiler throws a warning/error if I tried to access a value that has been moved/borrowed, which was really helpful to write *proper* Rust code. Luckily, I have not need to think about lifetimes yet - the time will come.
### Part 2
I thought Part 2 is quite tricky, because I couldn’t figure it out on my own the first try. My first solution was a crazy amount of nested `if` statements - I got lost in the sauce. Not only was I lost in the sauce, my solution was outright wrong. I had to find an [implementation in JavaScript](https://github.com/JoanaBLate/advent-of-code-js/blob/main/2024/day02-solve2.js), digest it, and implemented it in Rust by myself.

```rust
pub fn part2(input: String) -> i32 {
    let mut total_safe = 0;

    for line in input.lines() {
        let row: Vec<&str> = line.split_whitespace().collect();
        // each row, generate all possibilities
        // then, check if it's safe or not

        if check_if_safe(&row) {
            total_safe += 1;
        } else {
            for i in 0..row.len() {
                let mut modified_row: Vec<&str> = Vec::clone(&row);
                modified_row.remove(i);
                if check_if_safe(&modified_row) {
                    total_safe += 1;
                    break;
                };
            }
        }
    }
    
    return total_safe;
}
```
## Initial Thoughts
After the first 2 days of Advent of Code, I think that it’s a super good tool to learn a new language! Especially if you’re starting out, since the problems (until now) are not super complicated, hence more time can be spent on figuring out the syntax of the language itself. As the days go on and the challenges harder, the learning curve would probably get steeper, but I’m looking forward to do it!


Advent Of Code: Day 1 & 2

Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

# Using Sanity as Headless CMS to Next.js Pages Router

Instead of using WordPress to create my portfolio and/or blog, I decided to build it in Next.js because I am an epic developer. Also because I wanted to learn more about what a website is made of; how it is built. By the same vein, it is why I chose to integrate a headless CMS to power the site, even though I could (and did) simply put all the pictures and markdown files in the /public directory.

This article is going to be a brief overview of how I setup and integrate Sanity as my headless CMS to my portfolio site.

## 1. Setting Up Sanity

After creating an account with Sanity, the next step is embedding Sanity Studio into my Next.js project. I started a new Sanity project with:

```jsx
// portfolio is the name of the Sanity project
npx sanity@latest init --env --create-project "portfolio" --dataset production
```

It asked a bunch of prompts that I just answered, most importantly the option to embed Sanity Studio into the project in a new directory, `/sanity`.

After the initialisation, Sanity created a `.env` file, which we need to rename to `.env.local` - just a Next.js thing so we can use `process.env.` to access it.

Navigating to `http://[localhost:3000](http://localhost:3000)/studio` will be met with a pop up, saying that `localhost:3000` should be added to CORS origin. Following the link and adding the link to the CORS settings of my Sanity project, navigating back to the Studio, and voila! My very own Sanity Studio is setup.

After following the Day One course in Sanity, I found myself creating a my first Sanity schema.

## 2. Configuring Schemas

Schemas are used to structure data in Sanity. I think of it as something similar to a JSON object, with extra meta-tags on them. The only schema I have is a `projectType`.

To initialise a custom schema, I created a new directory inside `/sanity` called `schemaTypes`. Created a `projectType.ts` in `/sanity/schemaTypes` and built the schema.

```tsx
import { defineField, defineType } from "sanity";

export const projectType = defineType({
    name: "project",
    title: "Project",
    type: "document",
    fields: [
        defineField({
            name: "title",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "slug",
            type: "slug",
            options: { source: "title" },
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "description",
            type: "string",
            validation: (rule) => rule.required(),
        }),
        defineField({
            name: "thumbnail",
            type: "image",
            validation: (rule) => rule.required(),
        }),
        // Sanity doesn't support markdown out of the box
        defineField({
            name: "markdownContent",
            type: "markdown",
        }),
    ],
});
```

In `defineField()`, `validation` is a function that returns a rule - in this case the fields are required for data entry. However, it is to note that markdown is not supported out of the box. Sanity uses `PortableText` specification to store their data. In order to store markdown (because all my content was created in markdown), I had to install a plugin from Sanity.

Simply run this command to install the plugin (and its peer dependency)

```tsx
npm install --save sanity-plugin-markdown easymde@2
```

Afterwards, add the plugin to the `sanity.config.ts` and the type “markdown” is available in `defineField()`.

```tsx
export default defineConfig({
    ...,
    plugins: [
        markdownSchema(),
        ...
        ,
    ],
});
```

Complete the new schema setup by adding it to `schema.ts`

```tsx
import { type SchemaTypeDefinition } from "sanity";
import { projectType } from "./schemaTypes/projectType";

export const schema: { types: SchemaTypeDefinition[] } = {
    types: [projectType],
};
```

After schemas are created, they can be viewed by opening the Sanity Studio, in this case `http://localhost:3000/studio`. Data can then be inserted into Sanity. Next up, let’s see how I use the data from Sanity to create the UI.

## 3. Populating the page with Sanity data

In `client.ts`, we can use a helper function recommended by Sanity.

```tsx
// helper function that only caches for 30s in dev. 
// in production, caches for an hour.
export async function sanityFetch<QueryResponse>({
    query,
    params = {},
    tags,
}: {
    query: string;
    params?: QueryParams;
    tags?: string[];
}) {
    return client.fetch<QueryResponse>(query, params, {
        next: {
            revalidate: process.env.NODE_ENV === "development" ? 30 : 3600,
            tags,
        },
    });
}
```

I used this helper function to fetch data from Sanity from inside of `getStaticProps()` of a page. This ensures that the page is compiled at build-time, and a snappier experience when navigating through the website.

 Other than the props of the data itself, I have put in `revalidate: 10` in the return object. This ensures that any update or changes to the content in Sanity is reflected in the webpage itself. Next will revalidate the cache every 10 seconds to check if the content of the page is up-to-date. If it is, the next time the page is requested, Next will serve the most updated page.

```tsx
export async function getStaticProps() {
    const GET_PROJECTS_QUERY = groq`*[_type=='project']{title, slug, description, thumbnail, markdownContent}`;
    const projects = await sanityFetch<GET_PROJECTS_QUERYResult>({
        query: GET_PROJECTS_QUERY,
    });

    return {
        props: {
            projects,
        },
		    revalidate: 10,
    };
}
```

You might notice that the `sanityFetch()` function uses a type. This type can be generated with `sanity typegen generate` using the Sanity CLI. I am not covering it in this article, though I highly recommend checking it out yourselves [here.](https://www.sanity.io/docs/sanity-typegen)

Now, we need to take the `projects` prop in the page component itself, and parse the data.

```tsx

interface Props {
    projects: Project[];
}

export default function Home({ projects }: Props) {
    return (
        <>
         ...
		    <div className='projects-grid'>
              {/* List of Projects */}
              {projects.map((project) => (
                  <ProjectItemCard
                      project={project}
                      key={project.title}
                  />
              ))}
          </div>
          ...
        </>
    );
}
```

## 4. Wrapping-Up

So that’s how I used Sanity to back my portfolio! This project entry will be sent to Sanity, and if this is live, Sanity has fully integrated into my website. My experience with Sanity has been great - everything is quite straightforward, and the documentation is ample. Then again, my current website does not require a lot of data manipulation or complex **groq** queries. Be sure to check my [Github](https://github.com/shawnanuptra/shawn-am) for more insight!

Sanity as Headless CMS to Next.js Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

# Using NextAuth in Next Pages Router

When developing my portfolio, I wanted to have a section of the website just for me. An admin side, so to speak. While I have used Firebase before, I wanted to explore new technologies that I have not used before. Since the portfolio is built on top of Next.js, I decided to use NextAuth (v4) for this project.

It’s important to note that this project would be using the `/pages` directory, instead of `/app`.

## Installation

```jsx
	npm install next-auth
```

## Add `[...nextauth.ts]`

In `/pages/api`, add `/auth/[...nextauth.ts]`. Here, I initialised and configured `NextAuth()` itself.

```jsx
import NextAuth from "next-auth/next";
import GithubProfile from "next-auth/providers/github";

export default NextAuth({
    providers: [
        GithubProfile({
            clientId: process.env.GITHUB_ID as string,
            clientSecret: process.env.GITHUB_SECRET as string,
        }),
    ],
    callbacks: {
        // only allow sign in from my email
        async signIn({ user }) {
            if (user.email == "shawnanuptraamartin@gmail.com") {
                return true;
            } else {
                return false;
            }
        },
    },
    secret: process.env.NEXTAUTH_SECRET as string,
});

```

I configured `NextAuth` properties: `providers`, `callbacks`, and `secret`. The `providers` options is used to configure the different ways to authenticate users. Google, Twitter, Discord, and many more are available. I chose Github because I am a well respected developer, and definitely not because my mentor suggested it.

The `callbacks` option basically states callback functions that are called after an action was run. I only used the `signIn` callback as an authorisation tool - ensuring only one email can be used to sign in and access the page. `return true` to continue the auth flow, `return false` will bring up the default error page.

While it is not needed in development, the `secret` option is essential in production as it will not complete the build process without it. It is used to encrypt JWTs and hash email tokens.

The use of `process.env` variables is used so that I do not expose my keys. It’s never fun to have someone else use your keys.

## Implementation

Firstly, we need to wrap the entire app with `<SessionProvider>` with the prop `session`.

```jsx
import Layout from "@/components/layout";
import { GlobalStyles } from "@/components/styles";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

export default function App(
    { Component, pageProps }: AppProps,
    session: Session
) {
    return (
        <SessionProvider session={session}>
            <Layout>
                <GlobalStyles />
                <Component {...pageProps} />
            </Layout>
        </SessionProvider>
    );
}
```

The `<SessionProvider>`  allows sessions to be shared between browser tabs. However, it is to note that the `session` prop will need to be populated later.

Now the fun part: using it in the UI!

```jsx
import { signIn, signOut, getSession, GetSessionParams } from "next-auth/react";
import { useRouter } from "next/router";

const Login = ({ session }: any) => {
    if (session?.user?.email) {
        return (
            <div>
                Signed in as {session?.user?.email} <br />
                <button onClick={() => signOut()}>Sign out</button>
            </div>
        );
    } else {
        return (
            <div>
                <button onClick={() => signIn()}>Sign in</button>
            </div>
        );
    }
};

export default Login;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    return { props: { session } };
}
```

When `/admin` is first loaded, since there are no sessions, the page will render the Sign in button. After clicking the button and invoking `signIn()` , the user will be redirected to a sign in page auto generated by NextAuth. After the sign in process, when the user is redirected back to `/admin`, the `async signIn()` that was configured in `callbacks` before was invoked, determining if the current user is able to access the page.

If the user is successfully signed in and redirected to the page, the page will need reload to load new information (a new session object). I mentioned before that the `SessionProvider` will need to be populated; since the page contains dynamic content (based on user authorisation), we need to implement Server Side Rendering (SSR), or the page won’t work properly. This is why we have `export async function getServerSideProps()`.

By using `getServerSideProps()`, we are telling Next.js to fetch some data before rendering and sending the HTML back to the browser. In this case, getting the `session` object. This `session` object is passed and accessed in the `Login()` component through the props.

This can also be seen in `/admin/dashboard` below.

```jsx
import { getSession, GetSessionParams } from "next-auth/react";
import React from "react";

const Dashboard = ({ session }: any) => {
    return (
        <div>
	          Dashboard
        </div>
    );
};

export default Dashboard;

export async function getServerSideProps(ctx: GetSessionParams | undefined) {
    const session = await getSession(ctx);
    // if no session, redirect to home
    if (!session) {
        return {
            redirect: {
                destination: "/",
                permanent: false,
            },
        };
    }
    return { props: { session } };
}
```

Note in the above code that there are extra functionalities in `getServerSideProps()`. This just means that the user will be redirected if the page is accessed before the session object is created.

And now you’re all set! Time to push to production!

## Pushing 🅿️(roduction)

Using Vercel as a host makes the process of pushing to production really easy. Just connect your Github account with Vercel, and you can deploy any of your public repository. There are a few things to keep in mind:

1. Remember to change / add the URL of your deployed site to your auth provider! I used Github for my project, and I created a production-only app since Github only allows one domain and authorised callback url.
2. When deploying in Vercel, your main domain name is [https://www.your-domain.com](https://www.your-domain.com). **Please take note of the www!!!** It took me 3 days of work to figure this out. Don’t make the same mistake as I did and make sure all your authorised callback urls contains the www.

## Conclusion

We have gone through the process of implementing authentication and authorisation with NextAuth with Next.js. The process is relatively straightforward (at least with Github), as long as the correct configuration steps are followed. 

Now you can go and make your own authenticated websites! Goodluck and have fun 🥳🥳

### P.S.

It’s very annoying to use NextAuth in preview branches in Vercel. The build constantly fails, and I have no intentions of using other methods to authenticate. It might just be an OAuth thing instead, though.

Hello there!

Latest Projects