Next.js Bits

More Information

Create A New Next.js Project In Seconds

This page is a work in progress. It’s published so that I can experiment with the sidebar and get it looking right. Listed below are a few things I’m going to tackle in this post.

You’ve set up nvm and picked out a code editor, now it’s time to create a new Next.js project! In this quick start guide, we’ll walkthrough how to create the initial app, what settings you should use (and why) and by the end you’ll see a working application running in your browser!

Create A Next.js Project

Open up your terminal of choice (I use Terminal.app, the Terminal built into macOS) and navigate to the directory you want to create your project. You don’t need to create a new folder for the project – the following command will do that for you.

Terminal

npx create-next-app@latestCode language: CSS (css)

What I love about this is how easy this is! You don’t need to have anything installed – other than Node.js which we setup in Level 1 with nvm.

This will down download everything it needs to create a Next.js project and ask you a series of questions:

Terminal

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*Code language: Bash (bash)

Let’s walk through each of these with the default.

Q1. What is your project named?

Keep this simple. I’d recommend making it lower case with dashes only. This is only set in the package.json file and can be changed at anytime. You can accept the default “my-app” if you’re just playing around.

Recommendation: your-project-name ✅

Q2. Would you like to use TypeScript?

The next big questions: TypeScript or JavaScript. TypeScript is a superset of JavaScript (all JavaScript is TypeScript). TypeScript adds on additional functionality to the language that, in my opinion, makes for a MUCH better programming experience.

I programmed in JavaScript up until about 2021. Since then I switched to TypeScript after a bunch of my much-smarter friends kept telling me to check it out. 😂 Now I can’t imagine going back to JavaScript!

Either one works. The default option is TypeScript, which to me is another vote in it’s favor.

Recommendation & Default: TypeScript ✅

Q3. Would you like to use ESLint?

ESLint is an amazing tool. It will analyze your code and find issues without even needing to run your code in the browser! There are a bunch of libraries to add additional ESLint rules. For example: eslint-plugin-react, eslint-plugin-react-hooks, and @next/eslint-plugin-next.

Recommendation & Default: ESLint Yes ✅

Q4. Would you like to use Tailwind CSS?

Tailwind.css is one of the most polarizing frameworks. I think this question is more “How do you want to write CSS?”. Do you want to write it in a separate CSS file (classic CSS) or by adding classes to HTML elements (Tailwind style).

There are very strong cases for both.

There are a number of libraries built on Tailwind.css including shadcn/ui – which has a ton of great options.

If you’re planning to use a component library that’s not based on Tailwind, don’t select CSS.

Recommendation & Default: Whatever you’re most familiar with. ✅

Q5. Would you like to use src/ directory?

How you organize the code in your application is a big question. I prefer having all the code for my application in the src/ directory, and that’s exactly what this setting does.

Recommendation & Default: Yes ✅

In May 2023 Next.js 13 was released with support for a new way of building applications. It’s been a few months and Next.js is now at version 14.0.3 as of the time of this writing.

So which should you use? create-next-app recommends the App router. This site, my personal blog and my startup all use the App router as well.

The App router makes layouts easier, improves SEO, improves the developer experience by leaps and bounds with a more robust (but still beta and changing) caching layer.

The Pages router is more stable and has a more stable and more simple and reliable caching mechanism.

If you’re learning Next.js today, I’d go with the App router. It’s clear that’s the direction React.js and Next.js are heading – even if you may experience some bumps along the way today.

Recommendation & Default: App ✅

Q7. Would you like to customize the default import alias (@/*)? No / Yes

I love this setting. Instead of writing src/components/MyComponent everywhere in your app, you’ll be able to write @/components/MyComponent.

Recommendation & Default: Yes ✅

Open the Project in Visual Studio Code

When I first started coding I didn’t realize that you could open an entire folder of code files. I was opening each file one by one and editing it. 🙈

You can open the entire project in Visual Studio code and quickly navigate between every file in the project. To do this you can either open up Visual Studio Code, select Open Folder and select your project. Or you can just run this command:

Terminal

cd <projectname>
code .Code language: HTML, XML (xml)

When you installed Visual Studio Code it added this code command. You can specify a local path and it’ll open up that folder !

Be careful with this command. If you ran code / it would open an editor to browse every file on your computer. This might stall your computer when VS Code tries to generate a file tree.

Start the Next.js Server

In the root directory (the one with the package.json file) start the Next.js project development server by running npm dev.

Terminal

npm dev

You can checkout the package.json file to see all the commands that are possible under the scripts section. There’s four of them to be aware of:

  • npm dev – The command you’ll use the most. This starts a development server on port 3000.
  • npm build – Generates an optimized version of your site for production use. When you deploy your site, this is what the server will build.
  • npm start – Starts the server in command will run the server, but in production mode.
  • npm lint – Runs your codebase through ESLint, a code analyzer that will find problems and formatting issues.

You’ll sometimes see these listed as npm run dev or npm run build. The run is optional. You may also see yarn dev or bun dev. These are npm alternatives that are slightly faster and may be useful once you have a larger project with a longer startup time.

Ideal Next.js Project Setup

There are two things we can do to package.json to make our life easier. When we ran npm dev, it took 2 seconds for the server to start. That’s not much, but we could improve it by enabling Turbopack.

package.json

"scripts": {
  "dev": "next dev --turbo",
  ...
},Code language: JSON / JSON with Comments (json)

Turbopack is experimental, but should improve your startup time to about 0.5 seconds. That’s a 400% increase!

One other change is to enable ESLint to fix your code for you.

package.json

"scripts": {
  "dev": "next dev --turbo",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "format": "next lint --fix"
},Code language: JSON / JSON with Comments (json)

Now if you run npm format, ESLint will fix any basic JavaScript or TypeScript errors for you!

View the Website In the Browser

With npm dev running, you should now be able to open the browser and see this site in action!

Open up http://localhost:3000 and check it out.

Just to make sure it’s working, we’ll make one change in the src/app/page.tsx file. Change the title of this page to “Game Bits” and save the file.

The browser will be updated immediately without the need to reload. This is called LiveReload, and will save you a ton of time!

Stop the Next.js Server

Once the server is running in your terminal, you can stop it at any time by pressing ctrl+c.

See you in the next level. 👾

Made with ♥️ by Adam Fortuna.