next.js tutorials

-

I figured I’d keep track of the resources I’ve consumed on my road to learning React with the nextjs framework. I’ve previously had a play with straight React, but I’m starting from practically zero so… let’s see how this goes!

Next.js Tutorials

First up, I took a look at nextjs.org, which seems to have pretty good documentation and tutorials.

I just followed this tutorial through from start to finish one morning. This tutorial gives you plenty of code to copy and paste, but sometimes doesn’t give much explanation as to what each bit is doing. It’s worth spending some time actually reading the code you’re copy/pasting to understand what is going on.

There are links for further reading for most sections, which are also worth a read. You can also read further into any given feature in the next.js docs.

I also configured a CNAME record under my domain name

Name: nextjs.portfolio
Data: cname.vercel-dns.com.

Resulting in https://nextjs.portfolio.mikemcmillan.dev

Confusion?

After completing this, I was still left wondering if this framework is littered with other functions that have magic names, such as the getStaticPaths and getStaticProps functions, and the header for API routes.

I’m confused as to what code runs on the client, and what runs on the server. I mean, clearly an API route is hitting the server, but this code is intermingled with the client code as far as I can see. Perhaps there is a coding standard about organising files?

I also needed to learn about how to perform TDD with this framework, and how to separate code according to SOLID.

In addition to all that, I noticed we’ve not even touched typescript yet!

Typescript

First up, let’s figure out how to switch from straight javascript to typescript. Initially I missed the extra tutorial on converting the blog from javascript to typescript.

Create an empty tsconfig.json file in the root of your project.

yarn add typescript @types/react @types/node --dev
yarn dev

Next.js should now have auto populated the tsconfig.json file with defaults.

Follow the rest of that tutorial to see what bits of code needs to change. It’s mostly just ensuring types have been defined.

More Confusion?

Ok, so I’ve read about typescript and react components… but all of these .ts files are just exporting functions. According to the documentation a next.js page IS a react component, so that clears that up.

Popular posts from this blog

Taking a memory dump of a w3wp process

-
Taking a memory dump of a w3wp process Taking a memory dump of an IIS worker process in a live system can be problematic, as IIS will kill the process if it has been suspended for more than 60 seconds. Only use these steps if your application is on a high availability cluster, else you’ll take your app down! copy sysinternals procdump.exe and pssuspend.exe to target machine create powershell file with: $iispid = Get-Process svchost | ? { $_ . modules . ModuleName -eq "iisw3adm.dll" } | Select - First 1 - ExpandProperty Id $workerpid = Get-Process w3wp | Sort ws - Descending | Select - First 1 - ExpandProperty Id & ".\pssuspend.exe" $iispid Write-Output "Creating memory dump for w3wp PID $workerpid " & ".\procdump.exe" - ma $workerpid & ".\pssuspend.exe" $iispid - r (taken from stackoverflow ) 3) check the w3wp process has reached the high level of RAM usage that you’re intending to...
Read more

GitLab Badges

-
Image
GitLab has built in functionality to allow you to add badges, to provide an at-a-glance status of your app's quality.  In order to set project badges up, you need to be a maintainer of the project so that you can access the settings. Pipeline Status This shows whether your master branch pipeline has passed or failed.  The badge is super easy to set up.  In GitLab go to Settings > General > Badges > Add Badge, and enter this: Name:  Pipeline Link:  https://gitlab.com/%{project_path}/commits/%{default_branch} Badge: https://gitlab.com/%{project_path}/badges/%{default_branch}/pipeline.svg These links should be right for any project, as they're using variables. Coverage % Code coverage is a little more involved, as it relies on you having already configured code coverage in your app.  For the app I've been working on, which is a dotnet application, I opted to use the opensource MiniCover .  This is configured to writes a code c...
Read more

sp_blitzIndex

-
Some more notes after watching Brent’s How I Use the First Responder Kit: sp BlitzIndex . This sproc will analyse every index across all databases in your sql server and return a prioritised list of potential issues. EXEC sp_blitzIndex @GetAllDatabases = 1 The MoreInfo column is interesting. If you copy the SQL out and run it, it will give you more information on the indexing issue in question. E.g: EXEC dbo . sp_BlitzIndex @DatabaseName = 'YourDatabase' , @SchemaName = 'dbo' , @TableName = 'tFoo' ; If you run this, the top result set it a list of indexes that are on the target table. It shows how many seeks and scans each index has had, the size of the index, etc. Note the URL column for more information on each issue category. Missing indexes are shown in the 2nd result set. The 3rd result set shows the table definition, which is nice to have without having to mess with the SSMS UI.
Read more