Next.js Guide | Getting Started

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Guide Prerequisites:

1. Good Javascript knowledge
2. Good Typescript knowledge
3. Basic React knowledge
4. Ensure Node.js 14.6.0 or newer is installed on your machine.

Follow me on my journey in learning Next.js. These guide break down documentation into little bite size pieces!

I was not born with the knowledge of Next.js, so in addition to hours of suffering, here is where additional wisdom of Next.js will come from:

1. Next.js docs
2. Udemy Course
3. The Nest.js Handbook

This guide will use typescript, MongoDB for a database, and tailwind for UI. I also use VS Code.

I will likely add more information in the future as I come across good examples in code.

Next Post

Getting Started

From docs:

We recommend creating a new Next.js app using create-next-app, which sets up everything automatically for you. (You don't need to create an empty directory. create-next-app will make one for you.)...

If you want to start with a TypeScript project you can use the --typescript flag:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

From docs:

Run npm run dev or yarn dev or pnpm dev to start the development server on http://localhost:3000
Visit http://localhost:3000 to view your application
Edit pages/index.js and see the updated result in your browser

The installer will then start the install, and will ask you a series of configuration questions. See how I set up my project below:

Once the installation is complete, navigate into the project folder and run npm run dev.

You can verify that the base project is working by visiting localhost:3000.

Checkout the default scripts in the package.json file.

From docs:

These scripts refer to the different stages of developing an application:

dev - Runs next dev to start Next.js in development mode
build - Runs next build to build the application for production usage
start - Runs next start to start a Next.js production server
lint - Runs next lint to set up Next.js' built-in ESLint configuration

Also note the pages and public folders at the root of the project directory.

From docs:

Next.js is built around the concept of pages. A page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. You can even add dynamic route parameters with the filename.

Inside the pages directory, add the index.js file to get started. This is the page that is rendered when the user visits the root of your application.

pages - Associated with a route based on their file name. For example, pages/about.js is mapped to /about

public - Stores static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

Notice that I also choose to start with a /src directory.

From docs:

Pages can also be added under src/pages as an alternative to the root pages directory.

The src directory is very common in many apps and Next.js supports it by default.

Important notes on /src directory:

From docs:

src/pages will be ignored if pages is present in the root directory

Config files like next.config.js and tsconfig.json, as well as environment variables, should be inside the root directory, moving them to src won't work. Same goes for the public directory

A guide on how to use environmental variable with Next.js and Typescript is coming up!

There you have it. You are ready to start your first Next.js project!

Thank you for stopping by!

Next Post