Forem: Joby Joseph

Setup Production Ready Next.js App - Part 2

Joby Joseph — Tue, 05 Mar 2024 20:44:45 +0000

6. TypeScript

Next.js gives us the option to add TypeScript while installing. We purposely opted out to learn from scratch.

As per Next.js doc, it contains TypeScript out of the box. So, change .js files to .ts extension. And, change .jsx files to .tsx extension.

Then run yarn dev. Next.js will install Typescript for you.

It will also create tsconfig.json for you. You just have to copy the contents of existing jsconfig.json to the new tsconfig.json. Then delete jsconfig.json. We no longer need that.

If you check package.json now, you can see TypeScript is added there. My TypeScript version:

"typescript": "5.3.3"

As soon as I enabled TypeScript, VS Code showed me an error:

The fix was to add import React from "react" statement explicitly.

I made the change in both page.tsx and layout.tsx. Now all files are in green color in VS code explorer. That means, there are no type errors.

Setup Production Ready Next.js App - Part 1

Joby Joseph — Fri, 16 Feb 2024 08:08:24 +0000

Creating a Next.js project is a single-line command. But taking it from there to production takes much more. This article explains different steps to create a robust Next.js project.

Completed project Github repo: https://github.com/jobyjoseph/nextjs-boilerplate. Each step here can be checked out with the corresponding branch name.

1. Create Next App

Baby steps first. Decide a project folder on your laptop. Navigate to the folder in terminal and run:



npx create-next-app@latest

When asked for project name, if you do not want to create a new folder, just enter .

Give No for TypeScript and ESLint. We can add them later. Your answers look like:

My package versions:



"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  }

You just created a Next.js app. Well done.

2. Simple Home Page

When we install Next.js the home page looks like:

Make it simple. Delete all contents of app/page.js and paste below code React component code in app/page.js.



export default function Home() {
  return <h1>Hello World</h1>;
}

Next, delete all contents of app/layout.js and replace it with:



export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({ children }) {
 return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Delete below 2 files:

page.module.css
globals.css

Now, we have a very simple home page. We cleaned up our project to start with very minimal files.

3. Lock Node.js Version

Team members might be using different versions of Node.js. We want to standardize it.

Create .nvmrc file in project root. Add just one line to that file.



lts/iron

Above setting helps a developer to easily switch to Node.js v20(lts/iron) if they do nvm install.

Next, go to package.json file and add engine details.



"engines": {
    "node": ">=20.0.0"
  }

Now, if a developer tries to run the project using Node.js version 18, below error is displayed.

4. Stick with Yarn

It is not fun when the team uses both yarn and npm. It creates extra lock files and confusion.

Let us stick with yarn.

Create .npmrc in project root. Add just this line to strictly follow engine versions mentioned in package.json file.



engine-strict=true

And in package.json, engines section is updated to:



"engines": {
    "node": ">=20.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },

Now try, npm install. You will get this error.

This prevents the accidental creation of a package-lock.json file.

5. Setup ESLint

ESLint helps to catch many errors much earlier. You already will have a yarn lint command ready. Run it. If the command is not there, add it.

When asked, choose "strict" option.

It will install eslint and eslint-config-next as dependencies.



"devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.1.0"
  }

Also an .eslintrc.json will be created with the below contents:



{
  "extends": "next/core-web-vitals"
}

Now, run yarn lint again. The terminal says that everything is good.

Testing one case:

Let us check if Next.js catches a linting error. There is a inline script id rule. Let us violate that.

Go to app/page.js.

Add import to next/script.



import Script from "next/script";

Use the Script tag without an id attribute inside JSX.



<Script>{`console.log('Hello world!');`}</Script>

Save and run yarn lint. It throws error.

So default Next.js linting is working. Undo the test code.

Part 2

References

How to Build Scalable Architecture for your Next.js Project
ESLint Next.js Documentation

Numeric Separators in JavaScript

Joby Joseph — Mon, 05 Apr 2021 19:03:37 +0000

Numeric separator(_) was introduced to make numbers more readable by creating a visual separation between groups of digits. The separator can be used with decimal, binary, hexadecimal or BigInt numbers. This feature was introduced in ES12.

It is difficult for humans to read large numbers quickly. What about 1000000000? Is it a billion or 10 million?. Numeric separators make developers' life easy.

const num = 1000_000_000; // Definitely a billion

Numeric separator is purely for visual separation. It does not have any impact in the functionality. In fact, comparing a number with separator and that without it, results in true.

console.log(1000_000_000 === 1000000000); // true

Position of Separator

The numeric separator can appear anywhere inside the number. Following are valid usages of numeric separators.

1000_000_000
123_02
4567_00
3_4_5_6

Numeric separator is not allowed at the end of a number. Therefore, following number is invalid.

123_00_

Also, if a number starts with _, JavaScript treats it as a variable. In JavaScript, a variable can start with _.

const a = _123;

Here _123 is considered as a variable name. Since that variable is not declared, above code will throw reference error.

Separators in Fractional Part

Numeric separators can be placed in the fractional part of a number.

12.300_00
1e10_10

Examples

Here are some examples that consider different use cases of numeric separator.

Binary Literal

A binary literal in JavaScript is denoted by prefixing a binary number by 0b. While writing a binary literal, we can place numeric separator to make it more readable.

console.log(0b11_1); // 7
console.log(0b111); // 7

111 is the binary equivalent of decimal number 7.

Hex Literal

A Hexadecimal literal in JavaScript is denoted by prefixing a hexadecimal number by 0x. We can include numeric separator in a hexadecimal number.

console.log(0xF_F); // 255
console.log(0xA_B === 0xAB); // true

Note that the decimal equivalent of 0xFF is 255.

BigInt Literal

A BigInt literal can contain a numeric separator.

const a = 1_309_89n;
console.log(typeof a); // "bigint"
console.log(a.toString()); // "130989"

If we place an underscore _ between the number and final n, it will throw an error.

const a = 1_309_89_n;

Above code results in following error:

SyntaxError: Numeric separators are not allowed at the end of numeric literals

Browser Compatibility

All the major browsers support numeric separators. We can see the precise information by visiting this CanIuse link.