Steps to initialize a Next.js project
Step 1: Create a Next.js project using the following commands:
npx create-next-app appdirectory
Step 2: Select the options below while creating the app using the above command.
Step 3: Change to that directory or just open the folder through file option in VS code.
cd appdirectory
Step 4: Create the folder structure and modify the json.config to handle routing.
Step 5: Configuring the json.config to handle imports in application.
// json.config
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["*"],
"@/components/*": ["./components/*"]
//accordingly add all other routes to be used out there.
}
}
}
Step 6: To run the project follow the below command.
npm run dev
How to Use the App Directory in Next.js?
Next.js is a popular react framework. It has introduced the App directory designed to refine the project organization by categorizing routes and components logically. This enhancement increases the developer’s workflow by simplifying the file management within the projects.