Next.js Guide | Getting Started
Tags: webdev, nextjs, typescript, mongodb
Published: 2023-02-03 15:43:17

## 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2zi9dpa6n37ld2m2a3q.jpg)

---

**Follow me on my journey in learning [Next.js](https://nextjs.org/).** 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](https://nextjs.org/docs)
2. [Udemy Course](https://www.udemy.com/course/full-stack-development-with-next-js-typescript/)
3. [The Nest.js Handbook](https://www.freecodecamp.org/news/the-next-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](https://dev.to/jacobjpelletier/nextjs-guide-getting-started-1541)

---

## Getting Started

![Getting Started](https://media3.giphy.com/media/xT5LMA6g4mzlTS4T04/giphy.gif?cid=ecf05e47ln89yjow7p0m3490rjyflz1yvy74fpeec3ekgpev&rid=giphy.gif&ct=g)

**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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/to76esio2xb36u863dbz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l5ijj41b132ku1twnug.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zhbiew32zaur8zu1tqu.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiy616s1gyog5wj8ajdj.png)

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

**From docs:**
> <u>Next.js is built around the concept of pages.</u> 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](https://nextjs.org/docs/advanced-features/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](https://dev.to/jacobjpelletier/nextjs-guide-getting-started-1541)