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.
select above options using left right arrows and press enter.
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.
appdirectory structure
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.
Contact Us