Create a Next.js app from scratch with create-next-app

edited: this problem solved by instructor. this was not a version problem. In a sentence "be careful with pnpm."

The newer version of next.js has been released, so we should use older version of next and create-next-app to achieve this course.

I have errors with 9.5.2. Do following avoid the errors:

npx create-next-app@9.4.4 my-nextjs-blog
cd my-nextjs-blog
npm remove next && npm install next@9.4.4

create-next-app@9.4.4 for same template with this course. newer versions index.js has line import css and that raise compile error with index.tsx. next@9.4.4 to avoid typescript error in the next lesson. If we use 9.5.2, we'll get internal server error after npm install --save-dev typescript @types/react @types/node in the next lesson.

Hey!

Thanks for the heads-up, I'll take a look and update the lessons if necessary!

Hey, I just went through the following steps on my machine and it works fine (and yes, I'm aware that "working on my machine" is something that everyone says 😅)

1. Run npx create-next-app@9.5.2 my-next-js-blog (to ensure that I'm using 9.5.2)
2. Create an empty tsconfig.json
3. Get a warning:

Please install typescript, @types/react, and @types/node by running: yarn add --dev typescript @types/react @types/node

4. Run yarn add --dev typescript @types/react @types/node

Here's the generated package.json:

"dependencies": {
    "next": "9.5.2",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.46",
    "typescript": "^3.9.7"
  }

I suspect that you may have issues because create-next-app uses yarn and in your comment you've mentioned that you used npm install --save in order to install typescript @types/react @types/node in the next lesson, could you verify?

Thanks for the feedback, I really appreciate it! 🎉 I'm still working on this collection, more to come! :)

Thanks for reply and add new lessons to this course. Current lessons are still very useful for me. However I am looking forward to it being updated, too.

Thanks, and sorry for poor my English.

Your English is great, you have nothing to apologize for!

Really happy to hear that my lessons are useful, I hope you'll learn a lot! :)

Thanks Tomasz for quickly response. Using yarn remove my problems! And I realized my mistake.

Cause of my problem was that I used pnpm. And my biggest mistake is I set alias npm=pnpm to my computer and I forgotton that.

After unalias npm or Install yarn, all problems (Internal server error and index.tsx compile error) are gone.

Here is some cases of using pnpm.

note that: all cases' create-next-app version is 9.5.2.

This is the bad case:

pnpm remove -g yarn
# the line above explains "when you don't have yarn".
pnpx create-next-app my-nextjs-blog
cd my-nextjs-blog
touch tsconfig.json
pnpm install --save-dev typescript @types/react @types/node  # Cause of error.

This works:

pnpm remove -g yarn
# the line above explains "when you don't have yarn".
pnpx create-next-app my-nextjs-blog
cd my-nextjs-blog
touch tsconfig.json
npm install --save-dev typescript @types/react @types/node

(I tested npm install before fixing alias, so my alias used pnpm instead of npm and raise errors.)

also this works:

pnpm install -g yarn
# the line above explains "when you have yarn".
pnpx create-next-app my-nextjs-blog
cd my-nextjs-blog
touch tsconfig.json
yarn --dev typescript @types/react @types/node

and It's no problem use npx and npm if we don't have yarn:

npm remove -g yarn 
# the line above explains "when you don't have yarn".
npx create-next-app my-nextjs-blog
# snip
npm install --save-dev typescript @types/react @types/node

Note: If we don't have yarn, the warning after create an empty tsconfig.json says:

Please install typescript, @types/react, and @types/node by running:

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

Thank you Tomasz for your help.

On Windows 10 I was getting this error: error - D:\development\egghead-next-tomasz\my-next-js-blog\pages_app.js Module parse failed: Unexpected token (4:9) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

my 'development' folder is a link. when I did the npx command in a folder with no symbolic links it worked fine. Hope this helps someone.