Finding icons for your project

The best option for picking one-off icons

Why building something is a great way to learn

Learning when the tutorial ends

How to use Framer Motion to create a custom loading spinner animation

Spinner Animation in React

Framer Motion Bouncing Ball Animation

Getting started with Framer Motion

A new language for the web from Facebook that compiles to JavaScript

What is Reason?

React is a client side library which means you can access everything you’re familiar with on the web including `document` and `window`. If you’re coming to Next.js from Create React App or using React as a single page app, there are some pitfalls to beware of.

Next.js is capable of rendering React on the client, just as before, and rendering React on the server. Even if you don’t explicitly use `getServerSideProps`, Next.js will still pre-render the page using the node server. You can learn more about this [pre-rendering in the Next.js docs](https://nextjs.org/docs/basic-features/pages#pre-rendering). In this environment, we don’t have access to `window`. So, what happens?

## What happens when accessing `window` on the server
When Next.js pre-renders the page, it generates the HTML then sends that to the client. When a user visits the page, it will load the HTML then rehydrate (the process of running React to allow the page to become interactive).  This is where the issue can occur. On the server, `window` is `undefined` and accessing anything on `window` will result in the familiar error thrown from `ReactDOMServerRenderer.render`:

```bash
ReferenceError: window is not defined
```

Now we know what can cause this error, why does it only show up sporadically?
## When does this error occur?
The challenge with this error – it’s inconsistent because Next.js may render your app differently depending on how the user navigates to a given page. 

Take a look at the [CodeSandbox to see the issue in action](https://codesandbox.io/s/how-to-solve-referenceerror-next-js-window-is-not-defined-vuwvg?file=/pages/index.js). In the example, we’ll use a the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) but any other browser specific APIs will present the same problem.

Here are a few scenarios:

### Using the next/link component
1. The user clicks on an internal link which uses the `next/link` component
2. The page doesn’t error and loads just fine

What happened? Because the navigation took place via a `next/link` component, the routing happens client-side, so Next.js didn’t pretender the page.

### Navigation from an external page
1. The user is on another site and click a link to the page
2. The page shows an error

The error occurred because the request went to the server directly and Next.js decided to pre-render the page when `window` doesn’t exist. 

### Page Refresh
1. The user clicks on an internal link which uses the `next/link` component
2. The page doesn’t error and loads just fine
3. The user refreshes the page
4. The page shows an error

The first navigation happens on the client, but the refresh makes a request to the server directly, triggering the error.

We know when it happens and why, let’s see how we can mitigate the issue.

## How do you fix window is not defined?
One way is to not use `window` at all when rendering the page, but that isn’t practical. Let’s look at some actual solutions that allow us to use `window` on the client but ignore it on the server.

### useEffect to the rescue
An easy solution to resolve this issue is to rely on the `useEffect`, conveniently hooks aren’t run when doing server-side rendering. Wrapping the usage of `window` inside a `useEffect` that is triggered on mount means the server will never execute it and the client will execute it after hydration.

```js
useEffect(() => {
  window.navigator.geolocation.getCurrentPosition(
      (newPos) => setPosition(newPos),
      console.error
    );
}, []);
```

### Checking for `window`
There is another option that is useful outside of React too. Checking if `window` exists in the current context:

```js
if (typeof window === "undefined") { /* we're on the server */ }
```

We can safely put code that is only supposed to be executed on the server behind this guard, likewise we can use `typeof window !== "undefined"` for code that should only run on the client.


## Interact with the CodeSandbox

<iframe className="w-full h-96 border-0 rounded-md overflow-hidden" src="https://codesandbox.io/embed/how-to-solve-referenceerror-next-js-window-is-not-defined-vuwvg?fontsize=14&hidenavigation=1&theme=dark" title="How to solve ReferenceError: next.js window is not defined" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

## Conclusion
`ReferenceError: window is not defined` is a pretty common error you may run into when using Next.js for the first time but don’t let that be a blocker. If you keep in mind that your code could be run on the client and the server, you’ll get used to ensuring your code works for both. I hope these solutions will help you on your journey.

Solve a the common ReferenceError: next.js window is not defined error that you may see when doing SSR & pre-rendering

There are a couple ways to get the current url depending on if you need it in the browser or when you’re on the server.

## Get the URL on the client side with a hook

You can get everything you need with the `useRouter` hook.

Import it like: `import { useRouter } from 'next/router'`, then call it in your components render function, `const router = useRouter()`. You can now use the properties on router.

Let's take a look at an example based on the very page you're looking at right now!

Assuming the url of the page is `/question/how-do-you-get-the-current-url-in-nextjs/`, let's take a look at two common properties `asPath` and `pathname`.

```jsx
import { useRouter } from 'next/router'

function QuestionPage() {
  const {
    asPath,        // the value: "/question/how-do-you-get-the-current-url-in-nextjs/"
    pathname,   // the value: "/question/[slug]"
  } = useRouter();

  return <h1>The Page</h1>
}

```

As you can see, `router.asPath` is the full path of the page. The pathname for this page, because it uses dynamic routing, contains the path parameter `slug`. If we wanted just the value of the slug, we can access it from `router.query.slug`.


## Get the url on the server

If you need to get the URL when doing SSR i.e. `getServerSideProps`, you have a couple options. You could access it on the `req` that is passed in like `req.url`. This will give us the path just like before. An alternative is to use `query`, this object will contain query strings and path params. Finally, you'll see a `resolvedUrl` prop too. This is the url without the `_next/data` prefix for client transitions.

```jsx
export async function getServerSideProps({ req, query, resolvedUrl }) {
  console.log(req, query, resolvedUrl)
  return { props: {} }
}

```

Take a look at the [Next.js docs for getServerSideProps](https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#context-parameter) for all the available properties on context.

## Static site generation and the url

If you're using SSG on your Next.js site, i.e. using `getStaticProps`, then you'll have access to `params` which is an object containing the parameters defined by the path as well as `useRouter` like before.

So the following on the question page would log `{ slug: 'how-do-you-get-the-current-url-in-nextjs' }` to the console when building the page :

```jsx
export async function getStaticProps({ params }) {
  console.log(params)
  return { props: {} }
}

```

These are the most common properties and techniques for getting the URL in Next.js. If you're working with internationalisation, you can also access `locale` to determine which locale is active.

Learn how to get the Curren URL in Next.js from the client, or server if using getServerSideProps`

**Overcoming obstacles when learning how to code**

If you’re just starting out learning how to code you may have experienced the thrill of learning something new and exciting followed by the abrupt chasm of unknowns and the intense frustration that overwhelms you. We’ve all been there. Learning to code can be stressful and frustrating, especially when you spend an hour on a problem and not progressing or you stare at a problem and don’t know how to start on solving it. Learning the fundamentals like algorithms is challenging because it takes a few things to fall into place before you become comfortable with the process. There are some tools that will help you on your learning journey.

## Break it up
When solving algorithms, it’s easy to get bogged down in the detail and the syntax. This leads you down rabbit holes that are difficult to get back out of, you might find yourself stuck on a problem long enough that you’ve forgotten the bigger picture.

To alleviate this, break up your large problem into smaller problems and write them down as a list of steps, you could even jot down some pseudocode. This makes a challenging problem, more approachable. You gain the added benefit of being able to see your progress too. Each sub-problem moves you one step closer to solving the problem as a whole.

## Review the fundamentals
Even professional musicians and athletes review the fundamentals. Everything is built on top of the foundational knowledge and especially with programming, you are consistently forced to revisit the fundamentals and refine your craft.

Don’t see programming as a checkbox exercise. You need to go back and revise every now and then. Try going back to an algorithm problem you’ve already solved, how would you approach it differently now you know more?

## Take breaks
You might get into the habit of thinking you need to code every hour of every day to get better. It’s an easy trap to fall into but it’s not very effective. When learning a new skill, repetition is important but your brain needs time to process what you’ve been learning.

If you’re stuck on a problem and can feel yourself going around in circles, take a break. Go do something different, take a walk, listen to some music. Do anything that gets you away from the problem. When you come back, you might see things from a different perspective or come up with the solution more easily because your mind has been doing some of the work subconsciously. 

## Ask for help
Programming is hard. Solving algorithms is hard until you know the formulae. Some learners feel like they can’t ask for help and end up struggling on a problem for hours. Help is available, make the most of it and don’t be afraid to ask. 

Forums, group chats, tutors and peers are valuable assets when learning to code. Try something out and do your best but if you’re stuck for hours on a problem, it just leads to frustration and disillusionment. You should ask for help when you see yourself really stuck.

## Stay consistent
Learning to code is a marathon not a sprint. It’s about the journey and in order to be successful you have to pace yourself. Doing 6 hours of coding one day then nothing for the rest of the week isn’t as effective as doing 45 minutes a day everyday.

You have to build the muscle of programming and it requires a consistent amount of effort. This doesn’t mean you can’t take breaks, it’s just more effective to favour consistent small amounts of practice over a single burst of learning. You want to build momentum and then maintain it, it will get easier over time.

---

These are just a few tips that will help you with learning how to code, especially if you’re just starting out and focusing on learning algorithms. This is by no means an exhaustive list but these 5 simple tips will help you stay on track.

Learning to code is challenging but these 5 tips will help you stay on track

Learn more about Beginner

Beginner Articles