Next.js setup

getting ourselves ready (quickly) with Next.js

Let's begin a clean Next.js setup with only the following:

Command line (with node and npm installed)
VS Code

Installation

Let's start on the command line by creating a folder (let's call it myproject)

mkdir myproject && cd myproject

In the project folder, enter the following command:

npm init -y

Next, install Node + TypeScript (with types) + React (with its virtual DOM) + Next:

npm install --save-dev node typescript @types/react @types/node react react-dom next

The following things will appear in the project folder:
- package.json = a project configuration and dependency list (which will we look at later)
  - dependencies are those third-party scripts
- node_modules = a folder with all the dependency scripts

Infrastructure folders and files

Now, let's create a folder called app at the project folder's root level
- we will store most of our front-end code in this folder

Public folder

We could also create a folder called public at the root level to store static assets (such as image files):
- a file called logo.png would have a relative path of /logo.png
- anything in a subfolder of public (e.g. logos/logo.png) would have a relative path of /logos/logo.png

.gitignore file

If using Git, we should also create a .gitignorefile at the root level, with the following content:

node_modules
.env

This avoids making the repo too large with any third-party scripts we may use in the project
- as a refresher, the package.json and package-lock.json already provide the information about third-party scripts
- anyone who clones the repo can then simply run npm install
  - npm will look into those json files and install the scripts!
We can also include any other files we do not wish to display publicly on our GitHub repo
- in this example, we included .env which typically contains private API keys

Root layout

Then, in the app folder, let's create a file called layout.tsx (a TypeScript file!):

/app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

That should provides us with a minimal front-end foundation:

On the next page, we will create our first page (component)
We will then run it from a local server on a browser
We can then deploy it to the cloud with a URL that anyone on the internet can access!

PreviousWhy Next.js?NextNext.js first page

Last updated 22 days ago