While we have a project to work on, let's see how easy it is to start a new Next.js project from scratch. It's a simple command, and you'll be guided through the setup process.
This single command is all it takes to kick off a new Next.js project. It's interactive, so you can customize your project as you go.
The command-line tool will then ask you a series of questions to configure your new project. This makes it easy to tailor the project to your specific needs.
First, you'll be asked to name your project. This determines the name of the directory where your project will reside. For instance, if you enter "my-blog," a folder named "my-blog" will be created.
Next, you can choose whether or not to use TypeScript. TypeScript adds static typing, which helps catch errors early. It's highly recommended for larger projects. Choosing "Yes" will generate a tsconfig.json file.
ESLint is a linting tool that helps maintain consistent coding style and catches potential errors. It's a great practice to include it from the start. Choosing "Yes" creates an eslintrc json file.
Tailwind CSS is a utility-first CSS framework that speeds up UI styling. If you choose "Yes", it will be installed and configured. If you choose "No", the initial project will use CSS modules.
This option lets you choose whether to keep your code inside a src directory. It's a good way to keep your project organised. Choosing "Yes" will create a src folder with app, components, and styles sub-folders.
The App Router is the latest and recommended routing strategy in Next.js. It uses React Server Components and unlocks powerful features. Choosing "Yes" uses the app directory. Choosing "No" will use the legacy Pages Router and the pages directory. It is recommended to use app router.
Turbopack is a Rust-based bundler that offers faster development. Choosing "Yes" uses Turbopack, and "No" uses Webpack. Turbopack is generally recommended for faster development, but it's still under development so some less common features might not work as expected.
Import aliases make your imports cleaner. Choosing "Yes" lets you customise the alias
If you chose to customize the alias, you'll specify the value here. This sets up the alias in your tsconfig.json or jsconfig.json file.
Once you answer all the questions, your new project will be created in the specified directory, and all the dependencies will be installed. You are ready to go!
If you have visual studio code installed, you can run the following commands to quickly open the project in the visual studio code!
