Next.js

Published at: 1 March 2024

Avatar

Introduction

Currently my website is created with Next.js. The previous version was built using vanilla React, but I was experiencing issues every time I had to update all packages or even when I cloned the repository to a new machine. Both repositories can be found on my GitHub page, but the React version will probably disappear over time:

Web Server

The project is hosted at :contentReference[oaicite:0]{index=0}, which is a serverless solution. It can be linked to a repository so that every time the code is pushed, a deployment is initiated with automated testing. Suffice to say that this is much more efficient than doing this manually. A very long time ago I was used to doing this with FTP.

Setup

I will assume you already have Node, NPM and NPX installed. To set up a React app, you can enter the command below. The preferred name is given as parameter to this command:

npx create-react-app my-app

For a Next.js app the command is almost identical:

npx create-next-app@latest

However, the project name is not provided as a parameter and a couple of questions need to be answered:

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router ? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

I opted to not use TypeScript, I did install ESLint but I'm not yet using it. I also don't use Tailwind in this project. Furthermore I want to have all of my source code bundled in the src directory, keeping the root directory clean. Of course I'm using the App Router which also was one of the reasons to migrate to Next.js. I left the default import alias as is.

Now you can start up your project, it will usually be available at https://localhost:3000. You can then start editing the app/page.js file.

npm run dev

API's

I used :contentReference[oaicite:1]{index=1} as my database, you could call this a Database as a Service (DaaS), although I did replace it with JSON files stored locally. I might migrate to using my own API in the future. I have some past experience with :contentReference[oaicite:2]{index=2}, you can also find a tutorial about that here. Back then I planned to use it as a CMS, but in this case I just want to use it as an API. I'm not sure yet if I will use full-blown Laravel, I might opt for :contentReference[oaicite:3]{index=3}.

Another API that I'm using is :contentReference[oaicite:4]{index=4} to grab all of my albums and tracks and allow for those to be played on my site.

Some other data is pulled from a JSON file that is hosted within this repository as well as some data from a Markdown file. I'm still searching for a solution for all of my images, this will probably be hosted in the Laravel instance in the future, but for now it also is part of the repository. I will update this tutorial with some code examples of all three variants of fetching data as soon as possible.

Some useful resources: