{"id":373973,"date":"2023-03-28T09:48:07","date_gmt":"2023-03-28T09:48:07","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=373973"},"modified":"2026-03-09T06:11:33","modified_gmt":"2026-03-09T06:11:33","slug":"project-setup-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/project-setup-next-js\/","title":{"rendered":"How to setup Project in NextJs"},"content":{"rendered":"\n

Whenever we set up a project, we ask how to approach it in the best way and what we can add to make it more robust and user-friendly. Let’s explore how to setup a NextJS<\/a> Project.<\/p>\n\n\n\n

What is NextJs?<\/h2>\n\n\n\n

If you are looking to develop a web application using Headless Architecture<\/a> then NextJs is a great choice for you. <\/p>\n\n\n\n

NextJs is a React-based full-stack framework for web development<\/a>. It offers production-ready features like: Static\/Server Rendering<\/strong>, ISR<\/strong>, Typescript <\/strong>, Routing,<\/strong> and many more with no config.<\/p>\n\n\n\n

NextJs Project Setup<\/h2>\n\n\n\n

In the Next.js project setup, we’ll add libraries for automation. When working in a team, we ensure adherence to guidelines and standards to maintain consistency and quality.<\/p>\n\n\n\n

Let\u2019s look through all the steps that are required to setup a NextJs Project.<\/p>\n\n\n\n

    \n
  1. NextJs Installation<\/a><\/li>\n\n\n\n
  2. Engine Locking<\/a><\/li>\n\n\n\n
  3. Code Standard and Formatting<\/a><\/li>\n\n\n\n
  4. Prettier<\/a><\/li>\n\n\n\n
  5. ES Lint<\/a><\/li>\n\n\n\n
  6. Visual Code Settings<\/a><\/li>\n\n\n\n
  7. Directory Structure<\/a><\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    NextJs Installation<\/h2>\n\n\n\n

    We’ll start by creating a NextJs application.<\/p>\n\n\n\n

    npx create-next-app@latest\n# or\nyarn create next-app\n# or\npnpm create next-app<\/pre>\n\n\n\n
    It will prompt you with some questions in the command line, then proceed to install your Next.js application. After the installation is complete, we will verify that the app is working correctly.<\/p>\n\n\n\n
    We are using npm<\/code> in this project setup, you can also use yarn<\/code> .<\/p>\n\n\n\n
    cd your-next-app-dir\nnpm run dev<\/pre>\n\n\n\n
    You can see the installed app on http:\/\/localhost:3000<\/a><\/p>\n\n\n\n
    \"NextJS<\/figure>\n\n\n\n
    Engine Locking<\/h2>\n\n\n\n
    As mentioned earlier. In this setup, we will focus on working with team on same project so it is important to lock our Node Engine and Packange Manager so our teammates work in same environment. <\/p>\n\n\n\n
    To do this we need to create two files .nvmrc<\/code> and .npmrc<\/code><\/p>\n\n\n\n