Ninja Space Content Blog

I just realized today that I cannot create a react app with the 'create-react-app' command in my terminal anymore. It has been deprecated by Meta and they manage React.js!

After some research and reading their documentation, I've attempted to learn to use Next.js for the first time, which works with React.js and ran into my first issue. I kept getting this error in my terminal: Cannot find module 'fs/promises'.

Installing Next.js for the First Time and Updating my Node Version

After I installed Next.js in my working directory, I had to figure out how to get rid of the error message: Cannot find module 'fs/promises'. So, my first attempt was to upgrade node because my machine was still at v12.18.3 and the current version today is v20.10.0. I had to catch up!

My first attempt worked to fix that error message in my terminal worked! After I upgraded my node version, the Cannot find module 'fs/promises' error message went away. Here are the questions you'll see and have to answer in the terminal when typed the following command: npx create-next-app@latest to use Next.js:

--copy and pasted from terminal--
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … winter-portfolio
✔ 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
✔ Would you like to use App Router? (recommended) … No / Yes
? Would you like to customize the default import alias
✔ Would you like to customize the default import alias (@/*)? … No / Yes

It asked a lot of prompts, which I appreciated because I realized that I was going to be using Tailwind CSS for the first time!

After everything was installed, I ran the dev command to see it on localhost 3000 on my machine. See the package.json file for the exact script command! I liked the broiler plate and started editing it right away to make my simple portfolio site.

Deploying Manually with an 'Out' Folder by Modifying the next.config.js File

After editing the html and content in the page.tsx and the css in the global.css file with my own stuff, I was ready to deploy it. I like deploying manually in Netlify so I did a bit of research online and realized all that I needed to do was edit the next.config.js file to create an 'Out' Folder and when I run my build command, it'll automatically create one. This is what needs to be changed in that next.config.js file before running the build command in the terminal: /** @type {import('next').NextConfig} */ const nextConfig = {output: 'export'} module.exports = nextConfig

After I edited that file with the code above, I ran the build command and found the 'Out' Folder in my directory. I just drag that 'Out' Folder to the deploy page in Netlify and it was done and published! It was quite easy. I had a already bought a domain from Netlify and had to drag it to the right site.

This was all in a day's work. If you've used the create-react-app command for React in the past, learning Next.js should not be too hard.

Installing Google Analytics Tag for Google Analytics G4

After deploying successfully, I spent the next few hours figuring out the easiest way to get Google Analytics tracking installed on my Next.js website. The simplest way is create a new tag for the Google Analytics GA4 property that you want to use under Google Tag Manager and copy that script (will need to change the format a bit so it's compatible). Then, using that code that you copy, you'll create a Script tag in your code editor with that code. I saw it in real-time reports immediately. Before being able to generate a Google Analytics tag, you'll need to make sure you have a Google Tag Manager and Google Analytics account already set up. Thankfully, they are both currently free to have an account with.