Set up a Next 14 Project with create-next-app
We'll start off by creating our project with npx create-next-app. This is a standard install so we'll select some of the options the CLI offers us.
Next, you'll notice that I'm running into some errors importing packages. This is because we need to update our eslint config so we'll edit .babelrc and .eslintrc to get those errors to go away.
[00:00] Let's go ahead and create a new Next year's application. We're gonna go to our terminal and run npx create next app followed by the name of the app, and we'll name our app chat app. And I will select no for typescript, and I will select yes for ES Lint. And I will select no for tailwind. And yes, I would like to use the source directory. [00:20] And yes, I would like to use the app router. And I'll select no for import aliases. Next we're going to cd into our application directory and then we're going to run the application with npm run dev. And then in our browser, we're [00:40] gonna go to local host 3,000. I'm gonna go to the source directory app and page file. And here, I'm going to replace all the boilerplate code with a simple title. And let's go ahead remove this image import as well for now. Now notice that we get this error in our import. So if [01:00] you're getting this error just like me that means you need to update your ESLint configuration. Let's go ahead and do this together. So in the root of our project, we're gonna create a new file called dotbabblerc and here we add in a JSON object that has a presets field and in the presets field we add in next babel. [01:20] Next, we're gonna go to eslintrc.json file. And here, we're gonna turn this extents field into array of strings, and we're going to add in next babble as an option. So let's go ahead and save this, and you'll notice [01:40] that the import error is now gone.