My Personal Take on Starting a ReactJS Project

Introduction

The React core team has recently released official ReactJS documentation that outlines the recommended practices for using React. In addition, they have suggested two meta-frameworks, NextJS and RemixJS, that can be used to start new React projects. While Create React App (CRA) is still a valid option, it is no longer the recommended way to begin a new React project.

Prior to the release of the official React documentation, I used to rely on Create React App (CRA) for creating Single Page Applications (SPAs) with React, and I would turn to NextJS whenever I needed to build a Server-Side Rendered (SSR) or Static Site Generation (SSG) application. However, after reviewing the new official documentation, I have decided to use NextJS for all my React projects.

Why NextJS, not RemixJS?

The main reason why I prefer using NextJS over RemixJS for my React projects is that I had prior experience with NextJS before the release of NextJS 13. Additionally, NextJS is a more mature framework compared to RemixJS, and it has a larger collection of useful libraries available. For instance, NextAuth.js is a great library for handling authentication in a NextJS application.

On the other hand, RemixJS is a relatively new framework, and their recent updates to routing features might lead to potential compatibility issues and breakage in my applications.

NextJS 13 was recently released by the NextJS team and includes some great new features such as AppDir and Turbopack. Despite these additions, NextJS 13 still supports the use of the pages directory, which is the common way to handle routing in a NextJS application.

Setting Up a NextJS App

To get started, I always make sure that NodeJS and NPM are installed on my local machine (which runs on Windows with WSL2). To create a new NextJS application, I simply run the following command in my terminal:

npx create-next-app@latest --typescript

I always prefer to choose the Typescript pre-configured option because it provides excellent code hinting and helps to avoid common mistakes when writing code.

When running this command, there are a few options that need to be selected. Typically, I go with the following choices: