
NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](nextjs-file-based-routing.png)

More content coming soon....


Getting Started with NextJS


JavaScript powers the web - it's **the** most important programming language you need to know as a web developer.

For example, you should understand code like this:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```

Learn more about it [here](https://developer.mozilla.org/de/docs/Web/JavaScript).


Mastering JavaScript

If you are working on a fullstack project, sooner or later you probably will get into the situation where you need to connect your web app to a database. In this blog post I will use **MongoDB**. This is pretty straight forward non-SQL database, which you can easily use for free!

## How to get started?
Before we can dive into the actual code, you will firstly need to set up some things concerning MongoDB. Firstly, create an account [here](https://www.mongodb.com/de-de/cloud/atlas). We will be using MongoDB cloud atlas.

After completing your registration and setting up an organization, you mainly will need to set up to things. Go to **Database Access** and add a new user. Make sure, that this user has read and write access! Use **password** as the authentication method and note this password, because you will need it soon. 

![Create an user](user.png)


After setting up your user, go to **Network Access** and add your current IP-address in order to be able to establish a connection to your database. Alternatively, you can allow access from every IP-address.

![Add IP-address](network.png)


## How to set up my code?
Since this post is all about data fetching, the **getStaticProps** function is the perfect place for establishing a connection and fetching data. If you don't know about getStaticProps and the other options NextJS offers, visit [this site](https://nextjs.org/docs/basic-features/data-fetching).

Below you can find the whole code for connecting and fetching data from MongoDB. We will go through it step by step.


```js
import { MongoClient } 
from "mongodb";

export async function 
getStaticProps() {

  const client = 
  await 
  MongoClient.connect(
    "mongodb+srv://
    <username>:<username>
    @cluster0
    .pqdlimongodb.net/
    <dbname>?retryWrites
    =true&w=majority"
  );

  const db = 
  client.db();

  const yourCollection = 
  db.collection
  ("yourCollection");


  const yourData = 
  await yourCollection
  .find().toArray();

  client.close();

  return {
    props: data
  };
}
```
In a first step, you need to install the required dependencies via **npm i mongodb**. After doing so, import the MongoClient with:

```js
import { MongoClient } 
from "mongodb";
```

As you can see, I constructed the whole function to be asynchronous, which usually is a good idea when it comes to data fetching. The first constant called **client** establishes the actual connection to your database. Inside the parentheses of the **connect function** you will need to replace the <username> and <password> with your credentials from the settings from the first step of this blog. Additionally, you will have to replace <dbname> with a name for the database of your choice!

After establishing a connection, you can store an instance of your database in the variable called **db**. 

```js
const yourCollection = 
  db.collection
  ("yourCollection");
```

Since MongoDB is a so called non SQL-database, we are working with collections here. The code snippet above shows how to store such a collection in the const **yourCollection**. In the case that this collection doesn't exist yet, it will be automatically generated by MongoDB. That's quite nice, isn't it?!?

In the next step, you store the actual data from the collection in a const called **yourData**. In that here, we are storing all entries in the collection. Alternatively, you could use following code:


```js
const yourData = 
  await yourCollection
  .find({}, {})
  .toArray();
```
In the first pair of curly braces, you can add filters, which will be applied to your collection data. The second pair of curly braces then tell your code, which data fields of your collection the filter should be applied on.

```js
const yourData = 
  await yourCollection
  .findOne({
  id: 3,
```
In case you're only looking for one specific data point in your collection, you can also use the code snippet from above. In this specific case, we are looking for data entries with the id of 3. 

In a last step, you would want to cut the connection to your database with following code: 

```js
client.close();
```

## Conclusion
So this was still a quite simple use case of integrating NextJS and MongoDB. It can get a bit more complex for example when it comes to fetching data for dynamic site. This will be covered in a separate blog post!

I hope you found this blog post helpful. Anyway, thank you for reading this article and have a nice day!

Integrating MongoDB to NextJs


In my [previous post](https://my-blog-alpha-navy.vercel.app/posts/nextjs-and-mongodb) I blogged about how you can set up MongoDB in order to establish a connection to your database within a NextJS-project and how to read data from your database. So if you missed, feel free to read that post first!

## Setting up your custom api route
Normally, when creating a new NextJS project via the command **npx create-next-app**, an api directory will be automatically created. Otherwise, you will have to create that directory in your **pages directory**. Inside that **api directory**, create a JavaScript-file (name it however you want to).

The code snippet below shows the whole procedure of setting your custom api route:

```js
import { MongoClient } 
from "mongodb";

export default 
async function 
handler(req, res) {

  if 
  (req.method 
  === "POST") {
  const data = 
  req.body;

  const client 
  = await 
  MongoClient.connect(
    "mongodb+srv://<user>
    :<password>
    @cluster0.pqdli.
    mongodb.net/<dbname>?
    retryWrites=true&w=majority"
  );

  const db = 
  client.db();

  const yourCollection = 
  db.collection("yourColl");

  const result = 
  await 
  yourCollection.insertOne(
    data);

  console.log(result);

  client.close();

  res.status(201).json({ 
    message: 
    "Data inserted successfully!" 
    });
  }
}
```

In a first step, you need to install the required dependencies via **npm i mongodb**. After doing so, import the MongoClient with:

```js
import { MongoClient } 
from "mongodb";
```

Afterwards, I created an asynchronous function called **handler** which takes two arguments: 1. req aka request and 2. res aka response. If you ever worked with for example node.js and express.js you will probably recognize these arguments. 

To put it very simplified: A request represents the incoming information and the response on the other hand contains the information, which will be sent back to the client.

As a first step inside the function, we check if the incoming request is from the type of **POST**. Only if this check comes out to be true, the code will continue
to proceed.  

```js
const data = 
    req.body;
```
We are expecting to have data attached to the incoming request. With the simple code above we get access to this data. 

The steps below should be familiar to you, if you followed this [tutorial](https://my-blog-alpha-navy.vercel.app/posts/nextjs-and-mongodb). We won't go into detail here. Just don't forget to insert your credentials there.

```js
const client 
  = await 
  MongoClient.connect(
    "mongodb+srv://<user>
    :<password>
    @cluster0.pqdli.
    mongodb.net/<dbname>?
    retryWrites=true&w=majority"
    );

  const db = 
  client.db();

  const yourCollection = 
  db.collection("yourColl");
```

The next step is **the** most important and only difference between reading and writing data to a MongoDB database. 

```js
  const result = 
  await 
  yourCollection
  .insertOne(
    data);
```

Instead of calling a **find** function on your collection, you call the **insert** or **insertOne** function. Like the name of the function implies, you insert data to your collection. The data, you put inside the parentheses is the data you got from the incoming request. That's actually it regarding your api route!

Of course, don't forget to shut down the connection.

And optionally, you can send back a response. In this example a status code of 201 and a message will be sent back.



```js
res.status(201).json({ 
  message: 
  "Data inserted 
  successfully!" 
  });
```

## Use the api in your React component
After setting your api route, we can go ahead and use this api route in our React components. 

For example, you could trigger this api route whenever a certain button in a form is clicked. The data from this form would then be sent to our database. We will play through this scenario in the following code snippets:

```js
async function 
clickHandler(enteredData) {
  const response = await 
  fetch(
    "/api/your-api-route", 
    {
    method: 
    "POST",
    body: 
    JSON.stringify(enteredData),
    headers: 
    {
      "Content-Type": 
      "application/json",
    },
  });

  const data = 
  await 
  response.json();

  console.log(
    data
    );
  }
```

Generally, you would insert this kind of function in a regular React component, just in front of the render or return function. Some React element should then point to our **clickHandler** function. In the example below a simple button will execute the function every time you press it.

```js
<button 
onClick =
{clickHandler}
 />
```

At some point you also need to define the **enteredData**, which is used as an argument in our **clickHandler** function. For example, you could bind some user input to this data. But this is not the focus of this blog post. 

Let's instead dive in to the **clickHandler** function!

```js
const response = 
await 
  fetch(
    "/api/your-api-route", 
```

Since our **clickHandler** function is asynchronous we can again use the await keyword in the body of the function. In this post I used the fetch api, which comes with React out of the box. This code will also work with any other libraries like axios or whatever you like. 

As a first argument of the fetch function, you need to pass the route. And this is exactly the route, which we defined earlier. 

**NOTE**: You **MUST** replace "your-api-route" with the name of your javascript-file in the api directory! This is essential!

```js
{
  method: 
  "POST",
  body: 
  JSON.
  stringify(enteredData),
  headers: 
  {
    "Content-Type": 
    "application/json",
  },
});
```
As a second argument you pass some more information, which specify the request we make with this api call. We are using the POST method since we want to write data. Additionally we need to pass the data as an argument to the body of the request. Our code on the server relies on data being passed to the body. We also convert it the data to the json format, so that we can easily handle the data on the server. In the headers we lastly define the type of the content (this is nothing special releated to NextJS or MongoDB).

```js
const data = 
  await 
  response.json();

  console.log(
    data
    );
```
In a last step you can store the print out the response, which is totally optional is that specific case here. If you can recall,  in this case this would be the message: "Data inserted successfully!". That's simply the response we defined in our api

## Conclusion
In this post you learned how to set up your own custom api and how to call it in a regular React component. This is a really useful and powerful skill to know when it comes to building fullstack NextJS web apps. I hope you enjoyed this post and have a nice day!

Sending and storing data to MongoDB

## Intro
When I first started this project, I faced the problem that there were not as much as tutorials on authenticating Spotify users as I expected. That's why I decided on publishing my approach to this problem.

This will be a series of two articles. In the first one I'm going to go through the authentication process with Spotify, ReactNative and expo-auth-session. The second part will be about displaying and playing your personal current top 20 songs in form of tinderlike swipecards. For a quick demo watch this [video](https://www.youtube.com/watch?v=UmSQqXhGjkA).

The whole project can be found [here](https://github.com/kevintomas1995/spotify_top_songs_player)

![Project Pic](spotify.jpg)

## Setup
Before we can dive in to the code, we first have to set up some things concerning Spotify. Go to [this site](https://developer.spotify.com/dashboard/applications) and log in with your Spotify account. After that, create an app. From the following screen you will later need the **client id**.

![App overview](spotify1.jpg)

Next, you need to go the **"Edit Settings"** screen. There, you need to insert a redirect URI. In my case it is "exp://127.0.0.1:19000/", since I'm working with expo on my local machine.

![Edit Settings](spotify2.jpg)

That was all concerning the setup! Let's dive into the code now!

## Login Screen
```js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { View, StyleSheet, KeyboardAvoidingView, Text } from "react-native";
import { Button, Image } from "react-native-elements";
import { useEffect, useState } from "react";
import { ResponseType, useAuthRequest } from "expo-auth-session";
import { useSelector, useDispatch } from "react-redux";
import * as tokenAction from "../store/actions/token";
import axios from "axios";
import * as songAction from "../store/actions/topSongs";

const discovery = {
  authorizationEndpoint: 
  "https://accounts.spotify.com/authorize",
  tokenEndpoint: 
  "https://accounts.spotify.com/api/token",
};

const LoginScreen = ({ navigation }) => {
  const dispatch = useDispatch();
  const [token, setToken] = useState("");
  const [request, response, promptAsync] = 
  useAuthRequest(
    {
      responseType: ResponseType.Token,
      clientId: "YOUR_CLIENT_ID",
      scopes: [
        "user-read-currently-playing",
        "user-read-recently-played",
        "user-read-playback-state",
        "user-top-read",
        "user-modify-playback-state",
        "streaming",
        "user-read-email",
        "user-read-private",
      ],
      // In order to follow the "Authorization Code Flow" 
      // to fetch token after authorizationEndpoint
      // this must be set to false
      usePKCE: false,
      redirectUri: "exp://127.0.0.1:19000/",
    },
    discovery
  );

  useEffect(() => {
    if (response?.type === "success") {
      const { access_token } = response.params;
      setToken(access_token);
    }
  }, [response]);

  useEffect(() => {
    if (token) {
      axios(
        "https://api.spotify.com/v1/me/top/
        tracks?time_range=short_term", {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      })
        .then((response) => {
          dispatch(songAction.addTopSongs(response));
        })
        .catch((error) => {
          console.log("error", error.message);
        });

      setTimeout(
        () =>
          navigation.replace("Home", {
            token: token,
            other: "blaaaa",
          }),
        500
      );

      dispatch(tokenAction.addToken(token));
    }
  });

  return (
    <KeyboardAvoidingView behavior="padding" 
    style={styles.container}>
      <StatusBar style="light" />
      <Text
        style={{
          fontSize: 30,
          fontWeight: "bold",
          color: "white",
          marginBottom: "20%",
        }}
      >
        top song player
      </Text>
      <Button
        title="Login with Spotify"
        style={styles.button}
        onPress={() => {
          promptAsync();
        }}
      />
      <View style={{ height: 100 }} />
    </KeyboardAvoidingView>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "black",
  },

  button: {
    width: 200,
    marginTop: 50,
  },
});
```

If you take a look at the imports you can see that I'm using **redux** for state management, **axios** for data fetching and **expo-auth-session** for the actual authentication. The other imports are pretty standard. 

Generally, we are using the **implicit** [authentication flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow). 

```js
const discovery = {
  authorizationEndpoint: 
  "https://accounts.spotify.com/authorize",
  tokenEndpoint: 
  "https://accounts.spotify.com/api/token",
};
``` 

The first constant **discovery** holds two links, which are essential for authentication process. **authorizationEndpoint** will be the link to which you will be redirected once you click the login button. The second one, **tokenEndpoint**, will call the spotify api in order to create a unique spotify token for your current session. 

```js
const [request, response, promptAsync] = 
useAuthRequest(
    {
      responseType: ResponseType.Token,
      clientId: "YOUR_CLIENT_ID",
      scopes: [
        "user-read-currently-playing",
        "user-read-recently-played",
        "user-read-playback-state",
        "user-top-read",
        "user-modify-playback-state",
        "streaming",
        "user-read-email",
        "user-read-private",
      ],
      // In order to follow the "Authorization Code Flow" to 
      // fetch token after authorizationEndpoint
      // this must be set to false
      usePKCE: false,
      redirectUri: "exp://127.0.0.1:19000/",
    },
    discovery
  );
```

For a detailed explanation of the **useAuthRequest** hook have a look [here](https://docs.expo.dev/guides/authentication/#spotify). The most important things to edit in this code snippet are at first the **clientId**. You must insert your client ID from the setup step. Secondly you need to define **scopes**. This has influence on which spotify api endpoint you can successfully use. Take a look at the [spotify api documentation](https://developer.spotify.com/documentation/web-api/quick-start/). The last important thing here is the **redirectUri**, where you need to insert the url where you want tp redirect your users after successfully connecting to spotify. In my case it is exp://127.0.0.1:19000/. This **MUST** be the same URL like in your settings!

```js
useEffect(() => {
    if (response?.type === "success") {
      const { access_token } = response.params;
      setToken(access_token);
    }
  }, [response]);
  ```
  In this section we check wheter the authentication process was successful. If so, we are extracting the access token from the response we get back from the code snippet before and we are storing it. 

  After that we are ready to use the access token to fetch data from the spotify api!

  ```js
  useEffect(() => {
    if (token) {
      axios(
        "https://api.spotify.com/v1/me/top/tracks?time_range=short_term",
         {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      })
        .then((response) => {
          dispatch(songAction.addTopSongs(response));
        })
        .catch((error) => {
          console.log("error", error.message);
        });

      setTimeout(
        () =>
          navigation.replace("Home", {
            token: token,
            other: "blaaaa",
          }),
        500
      );

      dispatch(tokenAction.addToken(token));
    }
  });
  ```

  At this point we are making a call to the [top tracks endpoint](https://developer.spotify.com/console/get-current-user-top-artists-and-tracks/?type=artists) in order to get the current top songs. In the headers, we are using the access token to get access to this endpoint. Additionally, I'm dispatching the top songs and the access token to the redux stores. Since we only have two screens this isn't quite necessary and you could alternatively pass the data through your components. Still, if the app will get more complex this can get very useful. In a last step, we are replacing the Login Screen with the Home Screen.

  The rest of the code is really pretty standards ReactNative code!

  As I mentioned in the intro feel free to checkout the [github repo](https://github.com/kevintomas1995/spotify_top_songs_player)

  ## Conclusion
  In the second part of this series we will cover the displaying and playing of your current top songs. As always, thank you for reading my story!

All Posts

Getting Started with NextJS

Mastering JavaScript

Integrating MongoDB to NextJs

Sending and storing data to MongoDB

Spotify Authentication with ReactNative