
<blockquote>
WARNING ABOUT LOADING TIME!</br>
Be aware that this project is hosted with a free tier service. This means that it will take a while for the server to spin up when it's accessed. Thank you for your patience!
</blockquote>

---

## Description

This is a MERN Fullstack project with authentication and CRUD functionality. Context for state management.

<br />

---

### Frontend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/GEMgrQWZ5gscedo2cdh96Y"></iframe>

<br />
<br />

---

### Backend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/1ABxrptfzwLarfi5YJKX2"></iframe>
<br />
<br />


This is a MERN Fullstack project with authentication and CRUD functionality.

Contact Keeper


---

## Description

Search for Github users with Github API and context.
<br />

---

## Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/3ydfAoHb8JLrhs39izHDLr"></iframe>


Search for github users with Github API and React Context.

Github Finder


<blockquote>
WARNING ABOUT LOADING TIME!</br>
Be aware that this project is hosted with a free tier service. This means that it will take a while for the server to spin up when it's accessed. Thank you for your patience!
</blockquote>

---

## Description

Fully functional fullstack e-commerce website.

- State management with Redux.
- Route and controller logic with JWT authentication.
- Admin area with CRUD functionality for users, products and orders.
- MongoDB.
- Pages including: product listing, product detail page with reviews, user login, payment with Paypal, shipment, etc.

<br />

---

### Frontend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/PMxfFafALUS8a2DTdF6ogt"></iframe>
<br /><br />

#### Store

Combines all reducers and apply thunk (middleware that allows
you to return functions).

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```js
const reducer = combineReducers({
  productList: productListReducer,
  //followed by all other reducers...
});

const cartItemsFromStorage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];

//followed by other localStorage variables...

const initialState = {
  cart: {
    cartItems: cartItemsFromStorage,
    shippingAddress: shippingAddressFromStorage,
  },
  userLogin: { userInfo: userInfoFromStorage },
};

const middleware = [thunk];

const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;
```

</details>
<br />

#### Thunk

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises. One of the main use cases for this middleware is handling asynchronous actions like using axios to send a GET request as seen in the Actions API call.

#### Constants

Just holds the constants names. The cases are: REQUEST, SUCCESS, FAIL, RESET.

#### Actions

Using async try/catch it fetches APIs and dispatches a type (e.g. REQUEST, SUCCESS, FAIL, RESET) that hits a Switch Case in the Reducer.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
export const listProducts =
  (keyword = "", pageNumber = "") =>
  async (dispatch) => {
    try {
      dispatch({
        type: PRODUCT_LIST_REQUEST,
      });

      const { data } = await axios.get(
        `/api/products?keyword=${keyword}&pageNumber=${pageNumber}`
      );

      dispatch({
        type: PRODUCT_LIST_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: PRODUCT_LIST_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message,
      });
    }
  };
```

</details>
<br />

#### Reducers

Takes previous state and action with its Switch Case and returns next state.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return {
        loading: false,
        products: action.payload.products,
        pages: action.payload.pages,
        page: action.payload.page,
      };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};
```

</details>
<br />

#### Screens

useDispatch & useSelector are both Redux Hooks.<br />
useDispatch will trigger the action and useSelector will receive the state.

#### Components

Some components also use Redux, like ProductCarousel and Header.

<br />

---

### Backend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/aqVxiWzGmMuuHVkkEmWH4"></iframe>
<br /><br /><br />

#### Server

The heart of the backend application. Connects to the DB via
config/db and uses all routes made available by routes (order,
product, user, upload) and error handling directly from the
middleware.

#### Config/db

Makes the connection to the database.

#### Routes

Best regarded as Endpoints. Route methods (get, post, put,
delete) are defined for the specified route and used in
conjunction with a controller and middleware functions, which
hold the logic. (e.g. router.post(&apos;/login&apos;,
authUser))

#### Controllers

Best regarded as the application logic. The functions defined
here will be requested when hitting the defined
routes/endpoints. It is the place where the logic for a given
route is applied.

#### Middleware

Either called directly from server.js for errorHandling or
from a given route, in this case userRoute, for both protect
and isAdmin functions. protect will make sure that the user is
logged in by verifying their bearer token (which is generated
by the util). isAdmin will make sure that the given user has
admin rights.

#### Utils

Generates a token which is called from the userController.
(e.g. when logging in a user)

#### Models

Defines the DB schema for a given model. userModal.js also
uses bcrypt to compare and hash passwords.


Fullstack e-commerce website using the MERN stack and Redux.

E-Commerce Website


<blockquote>
WARNING ABOUT LOADING TIME!</br>
Be aware that this project is hosted with a free tier service. This means that it will take a while for the server to spin up when it's accessed. Thank you for your patience!
</blockquote>

---

## Description

Fullstack MERN + Redux project with CRUD functionality.

- Adds/deletes logs & users
- Lists logs/users

<br />

---

### Frontend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/6HhUtBd9MPuW2Q5dRBwkGp"></iframe>

<br />
<br />

### Backend Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/8nz7fA3xLm9Go5eATXQBxq"></iframe>
<br />
<br />


This is a fullstack MERN + Redux project with CRUD functionality.

Message Logger


---

## Description

Project built using next-auth library to handle authentication.

- SessionProvider
- useSession
- getSession
- CredentialsProvider
- JWT & bcryptjs (for password hashing)
- Mongodb
- HTTP requests sent using fetch

<br />

---

### Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/TJvgBnoGBnBKKvcagi4P1y"></iframe>

### Next-auth:

- 'SessionProvider'
  Contains the 'session context' and is exposed at the top level of the application '\_app.js'.
  'SessionProvider session={pageProps.session}' This will skip the 'session http request' on 'profile.js' since it's provided by 'getServerSideProps(context)' on 'profile.js'.
  'auth.js' will send this 'session http request' since it does not have a 'getServerSideProps(context)'.

- 'useSession()'
  Frontend - Add React Hook. Checks if someone is signed in. Used in 'main-navigation.js' component.

- 'getSession()'
  Backend - Used to protect the API Route.

- 'CredentialsProvider'
  Manages token creation behind the scenes, 'JWT' (JSON Web Token), used in '/api/auth/[...nextauth]'.
  Needs to be a 'catch all route' because 'next-auth' exposes multiple routes for login, logout and others more.

  <sup>_List of 'next-auth' exposed routes (**that should not be overwritten by your custom ones**): [https://next-auth.js.org/getting-started/rest-api](https://next-auth.js.org/getting-started/rest-api)._</sup>
  <sup>_Other providers overview: [https://next-auth.js.org/providers/](https://next-auth.js.org/providers/)_</sup>

#### Next:

- 'getServerSideProps()' fetches data from server on each request. Needed for 'profile.js' page, since it needs to verify if the user is authorized. It also redirects the user from 'profile.js' to 'auth.js' if the user is not authorized, thus keeping 'profile.js' only visible to authorized users.

- 'useRouter()' for redirects. (e.g.: after login/logout 'router.replace('/')').

#### React:

- 'useRef()' for capturing input in forms (e.g.: e-mail, password, etc.)

- 'useState()' for setting and using state (e.g.: loading, error messages, request status like 'pending/success/error')

- 'useEffect()' for setting timeout (e.g.: notification); check for session/authentication 'auth.js'

#### Others:

- 'bcryptjs' used for hashing and comparing passwords.

- 'MongoClient' for database connection.

#### HTTP requests sent using 'fetch':

- 'POST' to send login data.

- 'PATCH' to change password.

#### Observations/Improvements:

- 'getStaticProps()' could be implemented for additional content like a list of products and 'getStaticPaths()' for accounting for dynamic pages with e.g. PDP (product detail pages). This would be outside of the scope of this 'next-auth' project though.

#### Misc:

Setting an 'input' 'type' from '"password"' to '"text"' shows the typed in password.

##### 'getServerSideProps()' 'redirect'

Only redirects after reloading the page or explicitly typing the URL. Thus the need to define the redirect in the component to redirect it automatically after login.

'getServerSideProps()' example! on 'auth.js' page, in an attempt to redirect to 'profile.js' page after logging in. Doesn't work.


Next.js project using next-auth library and JWT to handle authentication.

Next.js Authentication


<blockquote>The links to the GitHub project and website refer to the open-source and initial version of this project. The upgraded version is the very website you're currently navigating.</blockquote>

---

## Description

Personal portfolio and blog website.

- Developed with Next.js using Static Site Generation.
- Dynamic pages for projects and blog posts.
- Blog posts and project details written in markdown and rendered with
  react-markdown.
- Framer motion, AOS and Swiper for the animations.

<br />

---

### Project Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/AWZSFKT3Fa9k2NRcFMPDH9"></iframe>
<br />
<br />

### Pages

#### index

Gets static props for featuredPosts and featuredProjects and holds components of the main page.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
export default function Home(props) {
  return (
    <>
      <Head>
        // <title>
        // <meta/>
      </Head>
      <Hero />
      <FeaturedProjects featuredProjects={props.featuredProjects} />
      <FeaturedPosts posts={props.posts} />
      <About />
    </>
  );
}

export const getStaticProps = () => {
  const featuredPosts = getFeaturedPosts();
  const featuredProjects = getFeaturedProjects();

  return {
    props: {
      posts: featuredPosts,
      featuredProjects: featuredProjects,
    },
  };
};
```

</details>
<br />

#### \_app

Encapsulates the whole app making components like Navbar and Footer available on all pages. Sets a default theme and takes in a theme change from the Navbar component.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("dark");
  return (
    <>
      <div className="app" data-theme={theme}>
        <Navbar theme={setTheme}>
          <Head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <link rel="shortcut icon" href="/favicon.ico" />
          </Head>
          <Component {...pageProps} currentTheme={theme} />
          <Footer />
        </Navbar>
      </div>
    </>
  );
}
```

</details>
<br />

#### \_document

Custom 'Document' adds fonts and optimizes loading for all pages. The Head component used in '\_document' is not the same as 'next/head'.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="anonymous"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Poppins&display=swap"
            rel="stylesheet"
          />

          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
            integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
            crossOrigin="anonymous"
            referrerPolicy="no-referrer"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
```

</details>
<br />

#### \projects\index

getStaticProps for all projects and sends props to AllProjects component.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
const Projects = (props) => {
  const { projects } = props;

  return (
    <>
      // <Head>
      <AllProjects projects={projects} />
    </>
  );
};
export default Projects;

export const getStaticProps = (context) => {
  const allProjects = getAllProjects();

  return {
    props: {
      projects: allProjects,
    },
  };
};
```

</details>
<br />

#### \projects\\[slug]

getStaticProps & getStaticPaths for all dynamic pages and sends props to ProjectContent component.

getProjectsFiles() gets all markdown files in the data directory.

'const slugs' maps through all markdown files and removes the '.md' extension and uses the file name as the slug.

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
const ProjectDetailPage = (props) => {
  const { project, currentTheme } = props;

  return (
    <>
      // <Head>
      <ProjectContent project={project} currentTheme={currentTheme} />
    </>
  );
};

export const getStaticProps = (context) => {
  const { params } = context;
  const { slug } = params;
  const projectData = getProjectData(slug);

  return {
    props: {
      project: projectData,
    },
    revalidate: 600,
  };
};

export const getStaticPaths = () => {
  const projectsFilenames = getProjectsFiles();
  const slugs = projectsFilenames.map((fileName) =>
    fileName.replace(/\.md$/, '')
  );

  return {
    paths: slugs.map((slug) => ({ params: { slug: slug } })),
    fallback: false,
  };
};

export default ProjectDetailPage;
```

</details>
<br />

### Components

#### ProjectContent

ProjectContent explanation...

Renders the content you are currently reading form the markdown file and sets theme for code snippets with 'const customRenderers'

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```jsx
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {
  atomDark,
  solarizedlight,
} from "react-syntax-highlighter/dist/cjs/styles/prism";

import Image from "next/image";
import classes from "./projectContent.module.scss";
import Link from "next/link";

import { motion } from "framer-motion";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const ProjectContent = (props) => {
  const { project, currentTheme } = props;
  const content = project.content;

  const customRenderers = {
    code(code) {
      const { className, children } = code;
      const language = className.split("-")[1]; // className is something like language-js => We need the "js" part here

      return (
        <>
          {currentTheme === "dark" ? (
            <SyntaxHighlighter
              showLineNumbers
              language={language}
              style={atomDark}
              // eslint-disable-next-line react/no-children-prop
              children={children}
            />
          ) : (
            <SyntaxHighlighter
              showLineNumbers
              language={language}
              style={solarizedlight}
              // eslint-disable-next-line react/no-children-prop
              children={children}
            />
          )}
        </>
      );
    },
  };

  return (
    <div className={classes.projectDetail}>
      <div className="container section mvh-100 projectDetail">
        <Link href="/projects/">
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            className="btn btn-filled"
          >
            View All Projects
          </motion.button>
        </Link>

        <div className={classes.card}>
          <div className={classes.projectLinks}>
            {project.githubLink && (
              <a href={project.githubLink} target="_blank" rel="noreferrer">
                <i className="fab fa-github"></i>
                Github
              </a>
            )}
            {project.liveLink && (
              <a href={project.liveLink} target="_blank" rel="noreferrer">
                <i className="fas fa-link"></i>
                Website
              </a>
            )}
          </div>

          <h1>{project.title}</h1>
          <small>
            {Array.isArray(project.tech)
              ? project.tech.join(", ")
              : project.tech}
          </small>

          {project.image && (
            <div className={classes.projectImage}>
              <Image
                src={`../../images/projects/${project.image}`}
                width={500}
                height={360}
                alt=""
              />
            </div>
          )}

          <ReactMarkdown
            components={customRenderers}
            rehypePlugins={[rehypeRaw]}
          >
            {content}
          </ReactMarkdown>

          {project.screenshots && (
            <div className="mb-50">
              <h2>Screenshots</h2>
              <Swiper
                rewind={true}
                grabCursor={true}
                modules={[Navigation]}
                navigation={true}
                className="mySwiper"
              >
                {project.screenshots.map((screenshot, index) => (
                  <SwiperSlide key={index}>
                    <Image
                      src={`../../images/projects/${project.slug}/${screenshot.screenshot}`}
                      width={1000}
                      height={700}
                      alt={screenshot.description}
                    />
                    <div className={classes.description}>
                      {index + 1}. {screenshot.description}
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ProjectContent;
```

</details>
<br />


Portfolio & Blog


## Description

Simple resort website with room listing and filter settings. Used react
context API for state management and Contentful for content (image, text)
delivery.


Simple resort website with room listing and filter settings. 

Resort website


---

## Description

Shopware is a modular, highly customizable open-source e-commerce platform.

While working at a specialized Shopware agency, I was involved in the development project for [<ins>Shopware 6</ins>](https://github.com/shopware/platform/tree/6.1). I implemented front-end features and refactored technologies from Shopware 5, such as jQuery and Bootstrap 3, into ES6 and Bootstrap 4.

I also worked on multiple other Shopware 5 and Shopware 6 projects for mid-sized and large-sized B2B and B2C clients in Germany. My work consisted of developing and testing the front-end using template engines like Smarty and Twig, along with jQuery, ES6, Bootstrap, LESS, and SASS. I used Docker and Vagrant for local development.

<br/>

---

### Some of the shops I worked on:

<br/>

<div class='mdGallery'>

<div>

[<ins>
![Shopware](/images/projects/shopware-screenshot.webp)<br/>
</ins>](https://shopwaredemo.store/)

#### Shopware 6

Shopware 6 demo store.
<br/><br/>

</div>
<div>

[<ins>
![Image ...](/images/projects/krieg.webp)<br/>
</ins>](https://krieg-online.de/)

#### krieg-online.de

Workplace equipment for business, industry and offices.
<br/><br/>

</div>

<div>

[<ins>
![Image ...](/images/projects/tila.webp)<br/>
</ins>](https://shop.tila-lachenmaier.de/)

#### shop.tila-lachenmaier.de

Food wholesaler.
<br/><br/>

</div>
<div>

[<ins>
![Image ...](/images/projects/winzer.webp)<br/>
</ins>](https://www.badischer-winzerkeller.de/)

#### badischer-winzerkeller.de

Winery - Association of wine cooperatives.
<br/><br/>

</div>
<div>

[<ins>
![Image ...](/images/projects/erima.webp)<br/></ins>](https://www.erima.de/)

#### erima.de

Sportswear manufacturer in the field of team sports.
<br/><br/>

</div>
</div>


Shopware 6 source code and multiple SW5 & SW6 projects.

Shopware


# Securely Managing API Keys - Next.js vs. Angular

<time>January 17, 2025</time>

![Image ...](/images/posts/api-keys/api-keys.jpg)

When building modern web applications, securely managing sensitive information like API keys is a critical concern. This question recently came up while I was working on a project integrating OpenAI's API, where protecting the API key was crucial to prevent unauthorized usage and potential cost implications. Whether you're using React, Next.js, or Angular, the handling of API keys requires thoughtful implementation to prevent them from being exposed to the client-side or intercepted by malicious actors. This article shows the different approaches for each technology, highlighting how to keep your keys secure.

## Next.js API Key Management

Next.js, a React framework, provides built-in server-side capabilities that simplify secure API key handling. You can use API keys safely in three main ways:

### 1. API Routes

The **/api/route.ts** files run exclusively on the server, making them perfect for secure API key usage:

```typescript
export default async function handler(req, res) {
  const apiKey = process.env.API_KEY;
  const response = await fetch("https://example.com/api", {
    headers: { Authorization: `Bearer ${apiKey}` },
  });

  const data = await response.json();
  res.status(200).json(data);
}
```

### 2. Server-Side Props

```typescript
export async function getServerSideProps() {
  const apiKey = process.env.API_KEY;
  const data = await fetchSecureData(apiKey);

  return {
    props: { data },
  };
}
```

### 3. Static Props (Build-time)

```typescript
export async function getStaticProps() {
  const apiKey = process.env.API_KEY;
  const data = await fetchSecureData(apiKey);

  return {
    props: { data },
  };
}
```

## Angular API Key Management

Angular now offers two approaches to API key security, depending on whether you're using Server-Side Rendering (SSR) or not.

### With Angular Universal (SSR)

Angular Universal allows you to handle API keys securely on the server side, similar to Next.js:

```typescript
// server.ts
app.get("/api/data", (req, res) => {
  const apiKey = process.env.API_KEY;
  // Make secure API calls here
});

// component.ts
@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("/api/data");
  }
}
```

### Without SSR

For client-side only applications, you'll need to implement one of these approaches:

1. **Backend Proxy (Recommended)**:
   Create a dedicated backend service to handle sensitive API calls:

```typescript
// proxy.service.ts
@Injectable()
export class ProxyService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get("/api/proxy-endpoint");
  }
}
```

2. **Environment Configuration (Public Keys Only)**:
   Only use environment files for public keys that are safe to expose:

```typescript
// environment.ts
export const environment = {
  production: false,
  publicApiKey: "your-public-key",
};
```

## Security Best Practices

1. **Environment Variables**:

   - Store API keys in .env files
   - Never commit .env files to version control
   - Use .env.example for documentation
   - Configure environment variables in your hosting platform

2. **HTTPS and Access Control**:

   - Always use HTTPS for data transmission
   - Restrict API key usage by domain/IP where possible
   - Implement proper CORS policies

3. **Framework-Specific Considerations**:

   - Next.js: Only prefix environment variables with NEXT_PUBLIC\_ if they're meant to be public
   - Angular: Keep sensitive environment variables in server-side code only

4. **Deployment**:
   - Use hosting platforms' secret management systems (Vercel, AWS, Azure, etc.)
   - Regularly rotate API keys
   - Monitor API usage for suspicious patterns

## Conclusion

Both Next.js and Angular provide robust ways to handle API keys securely. Next.js offers built-in server-side capabilities that make secure implementation straightforward, while Angular with Universal now provides similar server-side security features. For client-side only Angular applications, using a backend proxy remains the most secure approach.

Remember to regularly audit your security practices and keep your dependencies updated to maintain strong application security.

## Useful links

Next.js:

Environment Variables: [https://nextjs.org/docs/app/building-your-application/configuring/environment-variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)</br>
API Routes Security: [https://nextjs.org/docs/app/building-your-application/routing/route-handlers#request-helpers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#request-helpers)

Angular:

Security best practices: [https://angular.dev/best-practices/security](https://angular.dev/best-practices/security)</br>
Server-side rendering: [https://angular.dev/guide/ssr](https://angular.dev/guide/ssr)


Securely Managing API Keys - Next.js vs. Angular


# Modal Routing in Next.js with Pages Router

<time>November 1, 2023</time>

![Image ...](/images/posts/modal-routing/modal-routing.jpg)

## Introduction

In this article, we'll dive into implementing Modal Routing in an already existent project with Next.js 12 and pages router. For those using Next.js 13 and the App Router, you can find relevant information at [Next.js Documentation](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes).

The concept behind Modal Routing is to open links in a modal dialog instead of redirecting users to a separate page. However, we still want to ensure the URL remains SEO-friendly. This means that whether the user types the URL directly in the browser's address bar or arrives via external links, the specific page behaves as expected. Additionally, if the user refreshes the modal, it should take them directly to the specific detail page.

## Diagram

<iframe style="border:none" width="100%" height="550" src="https://whimsical.com/embed/DdqKEifXETV8PK5KNN8bsp"></iframe>

Here's an overview to improve your comprehension of the different components and their interactions in this example. Detailed explanations for each component will be provided in the following sections.

### AllProjects:

- The "AllProjects" component serves as a gallery, responsible for displaying a collection of projects.

### ProjectItem:

- The "ProjectItem" component is used within the "AllProjects" component. It contains the "Link" for each specific project.
- The "Link" is used to navigate to individual project details or open them in a modal.
- It has parameters such as href, as, and shallow to control how the navigation and URL presentation work.

### ProjectContent:

- The "ProjectContent" component is responsible for displaying the detailed content of a selected project. It is designed to show the specifics of a project, such as its title, description, and other relevant information.

### Modal:

- The "Modal" component is an essential part of the setup, serving as a parent for the "ProjectContent" component.
- It controls the visibility and behavior of the modal dialog, allowing users to view project details without leaving the current page. It ensures a seamless user experience when interacting with project content.

## Detailed explanations with code

## Pages

### Index (pages/projects/index.js)

Receives data for all projects with getStaticProps and passes it as props to AllProjects component.

```jsx
const Projects = (props) => {
  const { projects } = props;
  const router = useRouter();

  return (
    <>
      <AllProjects projects={projects} />
      <Modal
        isOpen={!!router.query.slug}
        onRequestClose={() =>
          router.push('/projects', null, { shallow: true })
        }>
        <ProjectContent
          project={projects.find(
            (project) => project.slug === router.query.slug
          )}
          pathname={router.query.slug}
        />
      </Modal>
    </>
  );
};

//export const getStaticProps = (context) => {...};
```

The central element of the Modal component resides within the projects index page, where it functions as the parent to the ProjectContent component. Within this context, two crucial parameters are associated with the Modal component:

1. **isOpen** is set to 'true' when a Link is clicked and **router.query.slug** is defined. The '!!' double negation operator makes sure that any value is converted to a boolean.
2. **onRequestClose** uses 'router.push' to close the modal and change the URL to '/projects'. **shallow** prevents full page reloads and is useful for modal dialogs to maintain the current page position when navigating.

```jsx

 <Modal
  isOpen={!!router.query.slug}
  onRequestClose={() =>
    router.push('/projects', null, { shallow: true })
  }>

```

To ensure that we can access the specific project data on the index page, which is typically retrieved in the slug page, we employ a method of comparison. This comparison involves matching the project's slug with the router query defined by the Link and passing it as props to the ProjectContent component. It's worth noting that the "projects" object contains the data for all the projects.

```jsx
<ProjectContent
  project={projects.find((project) => project.slug === router.query.slug)}
  pathname={router.query.slug}
/>
```

### Slug (pages/projects/[slug].js)

This page is responsible for rendering the detailed content view when users access the route directly by entering a URL in the browser's address bar or when they refresh the modal. **getStaticProps** retrieves data specific to the project and passes it as props to the "ProjectContent" component. **getStaticPaths** generates the dynamic paths for projects.

```jsx
const ProjectDetailPage = (props) => {
  const { project } = props;

  return (
    <>
      <Head>
        <title>Project - {project.title}</title>
        <meta name='description' content={project.description} />
      </Head>

      <ProjectContent project={project} />
    </>
  );
};

//export const getStaticProps = (context) => {...};
//export const getStaticPaths = () => {...};
```

## Components

### Modal

The Modal component is an essential part of implementing modal routing. It controls the visibility of the modal and prevents scrolling when the modal is open.

```jsx
const ProjectModal = (props) => {
  const { isOpen, onRequestClose } = props;

  useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    if (!isOpen) document.body.style.overflow = 'unset';
  }, [isOpen]);

  return (
    <>
      {isOpen && (
        <div className={classes.backdrop} onClick={onRequestClose}>
          <div className={classes.content}>{props.children}</div>
        </div>
      )}
    </>
  );
};

export default ProjectModal;
```

### ProjectItem (Link)

The ProjectItem component is a child of AllProjects component, shown at pages/projects/index.js, which serves as a gallery for displaying a collection of projects. In the Link we have following parameters:

**?slug=** is used to pass query parameters to the route. It's a way to send data to the dynamic route, typically used to specify which project or content to display.
The ?slug= format is used for query parameters and is often associated with dynamic routes. You can include query parameters in the href to send data to the dynamic page.

**as** used when you want to show a different URL in the browser's address bar than the one used for routing. This can be useful for creating more user-friendly or SEO-friendly URLs.

**shallow** prevents full page reloads and is useful for modal dialogs to maintain the current page position when navigating.

```jsx
<div className={classes.card}>
  <Link
    href={`/projects/?slug=${project.slug}`}
    as={`/projects/${project.slug}`}
    shallow={true}>
{/* ... */}
```

### ProjectItem (router.push)

While Link is the preferred method for modal routing, you can achieve similar results using router.push. However, this approach may have a negative impact on SEO.

```jsx
<div className={classes.card}>
  <button
    onClick={router.push(
      `/projects/?slug=${project.slug}`,
      `/projects/${project.slug}`,
      {
        shallow: true,
      }
    )}>
{/* ... */}
```

## Bonus

### Conditionally open modal with query parameters

If you want to implement Modal Routing on your root index page, which features both Projects and Posts, you'll need to ensure that only one instance of the Modal is opened at a time. To achieve this, you can pass ProjectContent and PostContent as children to the Modal. But how does the Modal know which one to render? This is where passing additional query parameters becomes crucial. [Next.js Documentation - Linking and Navigating](https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating)

When constructing the Link's **href**, you should use an URL object that includes the **pathname**, which is the root ('/'), and within the **query**, specify the **slug** and the **type**. These query parameters will help identify whether the link corresponds to a project or a post and guide the rendering of the Modal content accordingly.

```jsx
<Link
  href={{
    pathname: '/',
    query: {
      slug: project.slug,
      type: 'project',
    },
  }}
  as={`/projects/${project.slug}`}
  shallow={true}>
```

Here is how your root index page should look like:

```jsx
<Modal
  isOpen={!!router.query.slug}
  onRequestClose={() => router.push('/', null, { shallow: true })}>
  {!!router.query.slug && router.query.type == 'project' && (
    <ProjectContent
      project={featuredProjects.find(
        (project) => project.slug === router.query.slug
      )}
      currentTheme={currentTheme}
      pathname={router.query.slug}
    />
  )}

  {!!router.query.slug && router.query.type === 'post' && (
    <PostContent
      post={featuredPosts.find((post) => post.slug === router.query.slug)}
      currentTheme={currentTheme}
      pathname={router.query.slug}
    />
  )}
</Modal>
```

Thanks for following along, and I hope this guide helps you implement Modal Routing with Pages Router effectively!


Modal Routing in Next.js with Pages Router


# How to deploy a static Next.js website on Github Pages

<time>June 23, 2022</time>

![Image ...](/images/posts/static-site-to-github-pages/github.jpg)

## Introduction

##### Using Next.js version 12.1.6

<blockquote>
Update: Since July 27th, this procedure can be done completely by github without a third party solution.

[github.blog](https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/)

</blockquote>

I've wanted to build a cool, or at least presentable, Portfolio-Blog for a while now. Since I've been working a lot with Next.js lately, I figured it would be a great idea to build this portfolio using Next.js instead of some plain html/css/js. And since I didn't want to pay for hosting just right now, Github Pages should do the trick.

The original idea was to **next build** and **next export** the project and then manually upload the generated files to a repository. Since this didn't work the way I was thinking, I searched and found an even better solution. This involves using Github Actions and a third party CI/CD solution available at Github Marketplace. The one I used is ["Deploy to Github Pages"](https://github.com/marketplace/actions/deploy-to-github-pages).

### 1. Github Actions

1. In your repository go to actions and add a workflow by choosing Node.js:

   ![Image ...](/images/posts/static-site-to-github-pages/github-actions-01.jpg)

2. You'll get a **node.js.yml** file like the one bellow:

   ```yml
   # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
   # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

   name: Node.js CI

   on:
     push:
       branches: ['main']
     pull_request:
       branches: ['main']

     jobs:
     build:

     runs-on: ubuntu-latest

     strategy:
       matrix:
         node-version: [12.x, 14.x, 16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
       - run: npm run build --if-present
       - run: npm test
   ```

3. Select the node version e.g. **node-version: [16.x]** then start replacing at **- run: npm ci** like the code below. Since I'm using **yarn** I also changed the respective **npm** commands. For example: **run: yarn install --frozen-lockfile** is equivalent to **run: npm ci**.

   We also need to bypass Jekyll since it doesn't recognize folders that start with an underscore, like "\_next". More about bypassing Jekyll on Github [Github Blog](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/) and [Stackoverflow](https://stackoverflow.com/questions/61450307/js-and-css-not-loading-when-hosting-next-application-on-github-pages).

   The section starting with **- name: Deploy** is the ["Deploy to Github Pages"](https://github.com/marketplace/actions/deploy-to-github-pages).

   ```yml
   - run: npm install -g yarn # Installs yarn.
   - run: yarn install --frozen-lockfile # Performs a clean install.
   - run: yarn build && export # Generates and exports files into "out" folder.
   - run: touch ./out/.nojekyll # This bypasses Github's Jekyll since it doesn't recognize folders that start with an underscore, like "_next".

   - name: Deploy
     uses: JamesIves/github-pages-deploy-action@v4.3.3
     with:
       branch: gh-pages # The branch the action should deploy to.
       folder: out # The folder the action should deploy.
   ```

4. The content of the folder **out** is then deployed to the **gh-pages** branch, which is then used by Github Pages.

### 2. Next.js config

#### - Custom image loader & basePath

1. In the Next.js application, we need to change the **next.config.js** file. We need to add a custom image loader since the standard one doesn't support **next export** which you can see in the error message bellow. More about built-in image loaders [official doc](https://nextjs.org/docs/api-reference/next/image#loader-configuration). This was a trial and error and the one that worked for me was the "akamai".

   Error message:

   ```txt
   Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
     Possible solutions:
       - Use `next start` to run a server, which includes the Image Optimization API.
       - Use any provider which supports Image Optimization (like Vercel).
       - Configure a third-party loader in `next.config.js`.
       - Use the `loader` prop for `next/image`.
     Read more: https://nextjs.org/docs/messages/export-image-api
   ```

   next.config.js:

   ```js
   /** @type {import('next').NextConfig} */
   const isProd = process.env.NODE_ENV === 'production';
   const nextConfig = {
     reactStrictMode: true,
     images: {
       loader: 'akamai',
       path: isProd ? 'https://<your github account>.github.io/' : '',
     },
     basePath: '/<your github repo>',
   };

   module.exports = nextConfig;
   ```

2. As seen above, you also need to define a **basePath**. The reason behind it is that images/assets will not load because your repository name will be part of the URL. There is another option called [assetPrefix](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) but it is discouraged. By the way you can also use a **isProduction** variable like this:

   next.config.js:

   ```js
   const isProd = process.env.NODE_ENV === 'production';
   //and then something like this ternary :
   basePath: isProd ? '/<your github repo>' : '',
   ```

#### - Changing Image src

1. Replace each image src as described in the [official docs](https://nextjs.org/docs/api-reference/next.config.js/basepath#images)

   ```jsx
   <Image
     src='/images/profile-pic.png'
     width={360}
     height={360}
     alt='profile-pic'
   />
   ```

   ```jsx
   <Image
     src='/<your github repo>/images/profile-pic.png'
     width={360}
     height={360}
     alt='profile-pic'
   />
   ```

Thanks for following along and I hope it helps you too!


Hi, I'm Rene!

Front End Developer

SHOWCASE