# Next.js

The purpose of this document is to help guide you through working with a potential project using the JavaScript library, Next.js. Outside of the official Next.js documentation, you should find here personalized recommendations for using the library based on the types of projects we typically see at Entermedia. We have broken these recommendations out into common elements we tend to interact with often in client work. If something you’re looking for isn’t represented you can either submit a pull request to this repository or refer to the official documentation.

# Getting Started

Entermedia follows a standardized approach for setting up new Next.js projects. This allows developers to easily switch between projects, faster project initialization, and ramp-up for new developers. All of these types of projects should start with this same setup.

# Step 1: Installation Options

Next.js Installation
Drupal Project Installation with Next.js for Drupal
WordPress Project Setup with Faust.js

# Step 2: Install commitlint

For projects using a Git repository, install commitlint.

# Step 3: Install Normalize.css

Using Faust.js?

Skip this step,, the Faust.js library already includes the Normalize.css package.

It's important that projects have the same starting point for browsers when rendering elements. Entermedia uses Normalize.css to do this to make elements render more consistently and in line with modern standards.

# Step 4: Install Storybook

See Storybook installation instructions.

# Step 5: Install Leasoft

Entermedia uses Leasot to intelligently parse and output TODOs and FIXMEs from comments in your files.

npm install --save-dev leasot

Once installed, add a new npm command in the package.json file:

"todo": "leasot '**/*.tsx' '**/*.scss' '**/*.ts' --ignore '**/node_modules' '**/schema.generated.ts'"

# Step 6: Default Next.js Additional Steps

# Project Structure

Next.js is fairly open in how you can organize your files and directories; if you establish a good structure from the start-up, your subsequent work will be easier, faster, predictable, and scalable. Entermedia has created some helpful starter packages to quickly get up and running:

Deploying on GitHub Pages?

Add an empty .nojekyll file in the /public directory to bypass Jekyll and prevent issues will files or directories that start with underscores (_).

styles Directory Structure

https://github.com/Entermedia-LLC/scss

components Directory Structure

https://github.com/Entermedia-LLC/nextjs-components

lib Directory Structure

https://github.com/Entermedia-LLC/nextjs-lib

# Install Dependencies & Setup Config

npm i html-react-parser
Create a config.ts file that's hold project specific configuration:
config.ts
```
const SITE_NAME = "Project Name";

export { SITE_NAME };
```

# Pages Setup

In pages/_app.tsx add the project's global styles:

_app.tsx
// Import global styles
import "normalize.css/normalize.css";
import "../scss/base.scss";
import "../scss/themes/default.scss";

# Tools & Resources

The following are Next.js tools & resources we use at Entermedia. This list will grow and change over time and is not meant to be comprehensive. Generally, we encourage or require these tools to be used in favor of other ones. Rules governing tools to be used and packaged with a client site will be much stricter than those used on internal projects.

Next.js - The React.js framework Entermedia has standarized on.
Next.js for Drupal - Next.js Drupal headless applications.
Faust.js - Next.js WordPress headless applications.