> 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/02.-coding-guide-and-essential-packages/1.-coding-style-guide.md).

# 1. Coding Style Guide

This document explains how to write code in the coding style used when developing a Next.js project.

{% stepper %}
{% step %}

### Componentization

{% hint style="info" %}
Most important: refactoring is needed after coding, but it's important to componentize from the very start.
{% endhint %}

Componentization is essential for readability and code reuse. It can be considered a core requirement of composable commerce.

Example: layout.tsx

{% code title="layout.tsx" %}

```
```

{% endcode %}

```tsx
const Layout = ({ children }) => (
  <div className="layout">
    <header> Header content ... ... </header>
    <main>{children}</main>
    <footer> Footer content ... ... </footer>
  </div>
);
export default Layout;
```

Instead of writing thousands of lines of code in this single file, code the Header and Footer in src/components/ and import them.

{% code title="layout.tsx (refactored)" %}

```tsx
import Header from '@/components/header';
import Footer from '@/components/footer';

const Layout = ({ children }) => (
  <div className="layout">
    <Header />
    <main>{children}</main>
    <Footer />
  </div>
);
export default Layout;
```

{% endcode %}
{% endstep %}

{% step %}

### Nullish Coalescing

This is the syntax that uses two question marks, ??. It's a JavaScript syntax introduced in ES2020, and it's useful when checking a REST API response received as JSON.

Example explanation:

* false || true; // => true
* false ?? true; // => false

The value false is a boolean, and the default value operator ?? only uses the default value that follows it when the left-hand side is **undefined or null**. In other words, it does not transform an intentional empty string "" value received in a response JSON.

Usage example:

{% code title="Example" %}

```javascript
const name = foo ?? "default value";
```

{% endcode %}
{% endstep %}

{% step %}

### Higher-Order Functions

It's good to become familiar with the syntax for .map, .filter, and .reduce.

Example:

{% code title="React (map) Example" %}

```jsx
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        {item}
      </li>
    ))}
  </ul>
)
```

{% endcode %}
{% endstep %}

{% step %}

### key

When coding based on React in general, not just Next.js, you must always provide a key value when using .map(). This is one of the most common mistakes when first getting started with React. Refer to the higher-order function (map) example above.
{% endstep %}

{% step %}

### try-catch

Example:

{% code title="fetch Example" %}

```javascript
async function fetchData() {
  // An async function for fetching data from an API
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`API call failed with status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    // Error handling or logging logic
    throw error;
  }
}
```

{% endcode %}
{% endstep %}

{% step %}

### ternary operator

Example:

{% code title="ternary Example" %}

```jsx
return (
  <>
    {isLogin ? <div>Logged in</div> : <div>Not Logged in</div>}
  </>
)
```

{% endcode %}
{% endstep %}

{% step %}

### Destructuring

Example: without destructuring

{% code title="without destructuring" %}

```javascript
function displayPerson(person) {
  const name = person.name;
  console.log(name);
}
```

{% endcode %}

Example: with destructuring

{% code title="with destructuring" %}

```javascript
function displayPerson({ name, age, job }) {
  console.log(name);
}
```

{% endcode %}
{% endstep %}

{% step %}

### optional chaining

To prevent errors that occur when a value is missing, enter a question mark for any field that is not required:

Example:

```javascript
productList?.info?.color
```

{% endstep %}
{% endstepper %}