
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](/images/posts/nextjs-file-based-routing.png)

... More content ...

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://google.com).


Mastering JavaScript


![CSS photo](/images/posts/css-anim-part1.jpg)

Example

Let the **div** element retain the style values from the last keyframe when the animation ends:

```css
div {
  animation-fill-mode: forwards;
}
```

## Definition and Usage
The **animation-fill-mode property specifies** a style for the element when the animation is not playing (before it starts, after it ends, or both).

CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.



CSS animation-fill-mode Property


JavaScript is **one of the most popular** modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.

![Js photo](/images/posts/javascipr-basics.png)

Add this code to the *main.js* file

```js
const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
```

## Example

Assign values to variables and add them together:

```js
var x = 5;         // assign the value 5 to x
var y = 2;         // assign the value 2 to y
var z = x + y;     // assign the value 7 to z (5 + 2)
```

All Posts

Getting Started with NextJS

Mastering JavaScript

CSS animation-fill-mode Property

JavaScript Basics