> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/01.-setup/2.-create-app.md).
# 2. Create App
This document guides you through starting a project using Next.js. It explains, step by step, the configuration content and method needed to start the project, and finally runs the Next.js app in your local environment.
***
{% hint style="info" %}
Prerequisites
node: As of now, the latest Next.js 16.2.3 only supports Node.js 20 or higher, so we recommend installing version 24 or higher.
(The current latest LTS version is 24.16.0)
{% endhint %}
## Set up
{% stepper %}
{% step %}
### Create the Project Folder and Open Your IDE
Example: app name: x2bee-fo-dev
```bash
$ mkdir x2bee-fo
$ cd x2bee-fo
$ code . # 자신이 쓰는 IDE 열기
```
{% endstep %}
{% step %}
### Create package.json
Create a package.json file at the project root and write the following content.
```json
{
"name": "x2bee-fo",
"private": true
}
```
{% endstep %}
{% step %}
### Install Dependencies
Install Next.js, React, and React DOM.
(If you use npm or yarn, use install; if you use bun, use bun add.)
$ yarn add next react react-dom
{% endstep %}
{% endstepper %}
Once the installation is complete, a node\_modules folder is created and the packages are installed at that path.
## Git Configuration
Create a .gitignore file that specifies which files and directories to ignore when managing the project with Git.
**.gitignore** file content:
```gitignore
# next.js
/.next/
# dependencies
/node_modules
pnpm-lock.yaml
package-lock.json
yarn.lock
```
Adding these entries to .gitignore prevents unnecessary files or dependency packages from being included in the Git repository.
## Scripts and Initial Run
Add scripts to package.json. Example:
```json
{
"name": "x2bee-fo",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^16.2.3",
"react": "^19.2.3",
"react-dom": "^19.2.3"
}
}
```
Now run the development server:
```bash
$ npm run dev
```
(Or with yarn: `yarn dev`, pnpm: `pnpm dev`)
When it runs, a .next folder is automatically created and you will see a message like the following:
* Local:
* Ready in Xs
(Since there is no page.jsx file yet, you may see a 404 error in the browser.)
## Initialize the Project and Connect the Remote Repository
Use the following commands to initialize the Git repository and connect the remote repository.
```bash
$ git init
$ git remote add origin https:// git 주소
$ git remote -v # 확인용
```
Commit and push the changes:
```bash
$ git add .
$ git commit -m 'x2bee storefront with Next14'
$ git push origin main
```
## Create the Basic Layout
Create an src folder at the project root, create an app folder inside it, then create a layout.jsx file and copy and paste the following code.
```javascript
import React from 'react'
const RootLayout = ({ children }) => {
return (
{children}
);
};
export default RootLayout;
```
Once this is done, the basic root layout definition is complete.
## Reference
```bash
$ ls node_modules/.bin # next 등이 있는지 확인
# next
```
When you run next via npx, the above path is used.
```bash
$ npx next --help
# Available commands build, start, export, dev, lint, telemetry, info, experimental-compile, experimental-generate
```
You can use the above commands to configure the scripts in package.json.
***