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

Share this video with your friends

Send Tweet

Next.js is a React framework that provides a solutions to problems such as:

  • bundling & transpiling your React code
  • code splitting
  • being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
  • client-side routing

With Next.js we get all of that (and much more!) in a single framework and in this quick lesson we're going to learn how to get started with Next.js by using create-next-app in order to start building a blog!

flied onion
flied onion
~ 4 years ago

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.

Tomasz Łakomy
Tomasz Łakomy(instructor)
~ 4 years ago

Hey!

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

Tomasz Łakomy
Tomasz Łakomy(instructor)
~ 4 years ago

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

  1. 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! :)

flied onion
flied onion
~ 4 years ago

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.

Tomasz Łakomy
Tomasz Łakomy(instructor)
~ 4 years ago

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! :)

flied onion
flied onion
~ 4 years ago

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.

Alex Nielsen
Alex Nielsen
~ 3 years ago

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.