diff --git a/.env.sample b/.env.sample
index b480be5..c1c6747 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1 +1 @@
-API_URL=https://api.dev.sik.party/api
\ No newline at end of file
+NEXT_PUBLIC_API_URL=https://api.dev.sik.party/api
\ No newline at end of file
diff --git a/src/models/Contacts.ts b/src/models/Contacts.ts
index 93d1840..b8ad902 100644
--- a/src/models/Contacts.ts
+++ b/src/models/Contacts.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
-const url = `${process.env.API_URL}/contacts`;
-const committeeUrl = `${process.env.API_URL}/committees`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/contacts`;
+const committeeUrl = `${process.env.NEXT_PUBLIC_API_URL}/committees`;
 
 export interface Committee {
   name_fi: string;
diff --git a/src/models/Event.ts b/src/models/Event.ts
index a29c236..c3d2ae0 100644
--- a/src/models/Event.ts
+++ b/src/models/Event.ts
@@ -3,7 +3,7 @@ import { getAuthHeader } from "@utils/auth";
 import { Tag } from "./Tag";
 import qs from "query-string";
 import { SignupForm } from "./SignupForm";
-const url = `${process.env.API_URL}/events/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
 
 export interface Event {
   id: number;
diff --git a/src/models/Feed.ts b/src/models/Feed.ts
index cd33b38..a7facfb 100644
--- a/src/models/Feed.ts
+++ b/src/models/Feed.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 import { getAuthHeader } from "@utils/auth";
 import { Tag } from "./Tag";
 
-const url = `${process.env.API_URL}/feed/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/feed/`;
 
 export interface Post {
   id: number;
diff --git a/src/models/JobAd.ts b/src/models/JobAd.ts
index 784e6e9..fcc2324 100644
--- a/src/models/JobAd.ts
+++ b/src/models/JobAd.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 import qs from "query-string";
 import { getAuthHeader } from "@utils/auth";
-const url = `${process.env.API_URL}/jobads/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/jobads/`;
 
 export interface JobAd {
   id: number;
diff --git a/src/models/Signup.ts b/src/models/Signup.ts
index d788e8f..53138e1 100644
--- a/src/models/Signup.ts
+++ b/src/models/Signup.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { getAuthHeader } from "@utils/auth";
-const url = `${process.env.API_URL}/signup/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/signup/`;
 
 export interface Signup {
   id?: number;
diff --git a/src/models/SignupForm.ts b/src/models/SignupForm.ts
index b17f737..14d51d6 100644
--- a/src/models/SignupForm.ts
+++ b/src/models/SignupForm.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { getAuthHeader } from "@utils/auth";
-const url = `${process.env.API_URL}/signupForm/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 import { Question } from "@components/Widgets/SignupQuestionsWidget";
 import { Signup } from "./Signup";
 
@@ -81,7 +81,7 @@ export async function updateForm(data): Promise<SignupForm> {
 
 export const signupFormSendEmail = async (data, id): Promise<any> => {
   try {
-    const resp = await axios.post(`${process.env.API_URL}/signupForm/${id}/sendemail/`, data, {
+    const resp = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/signupForm/${id}/sendemail/`, data, {
       headers: {
         "Authorization": getAuthHeader(),
       },
@@ -95,7 +95,7 @@ export const signupFormSendEmail = async (data, id): Promise<any> => {
 
 export const getSignups = async (id): Promise<Signup[]> => {
   try {
-    const resp = await axios.get(`${process.env.API_URL}/signupForm/${id}/signups/`, {
+    const resp = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/signupForm/${id}/signups/`, {
       headers: {
         "Authorization": getAuthHeader(),
       },
diff --git a/src/models/Tag.ts b/src/models/Tag.ts
index c5159f5..f1677f3 100644
--- a/src/models/Tag.ts
+++ b/src/models/Tag.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const url = `${process.env.API_URL}/tags/`;
+const url = `${process.env.NEXT_PUBLIC_API_URL}/tags/`;
 
 export interface Tag {
   id: number;
diff --git a/src/pages/admin/login.tsx b/src/pages/admin/login.tsx
index 3121a16..f287153 100644
--- a/src/pages/admin/login.tsx
+++ b/src/pages/admin/login.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import { Helmet } from "react-helmet";
-import { Redirect } from "react-router-dom";
-import qs from "query-string";
+import { withRouter } from "next/router";
+import { WithRouterProps } from "next/dist/client/with-router";
 import { generateToken, setTokenCookie, isAuthenticated } from "@utils/auth";
 
 const Main = styled.div`
@@ -11,14 +11,7 @@ const Main = styled.div`
   }
 `;
 
-interface AdminLoginPageProps {
-  history: {
-    push: (to: string | string[]) => void;
-  };
-  location: {
-    search: string;
-  };
-}
+type AdminLoginPageProps = WithRouterProps;
 interface AdminLoginPageState {
   username: string;
   password: string;
@@ -52,7 +45,7 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
   handleSubmit = async (e) => {
     e.preventDefault();
     const { username, password } = this.state;
-    const { history } = this.props;
+    const { router } = this.props;
 
     try {
       const token = await generateToken(username, password);
@@ -60,7 +53,7 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
       setTokenCookie(token);
 
       const next = this.getRedirectURL();
-      history.push(next);
+      router.push(next);
     } catch (err) {
       this.setState({
         error: "Failed to log in!",
@@ -93,20 +86,19 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
   }
 
   getRedirectURL = () => {
-    const { location } = this.props;
-    const { search } = location;
-    const params = qs.parse(search);
-    const { next } = params;
+    const { router: { query } } = this.props;
+    const { next } = query;
     // TODO: Any change of next being string[]? We get type error on without the cast.
     return next as string || DEFAULT_REDIRECT;
   }
 
   render() {
+    const { router } = this.props;
     const { username, password, isAuthenticated } = this.state;
     const next = this.getRedirectURL();
 
     if (isAuthenticated) {
-      return <Redirect to={next} />;
+      router.push(next);
     }
 
     return (
@@ -133,4 +125,4 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
   }
 }
 
-export default AdminLoginPage;
+export default withRouter(AdminLoginPage);
diff --git a/src/pages/admin/logout.tsx b/src/pages/admin/logout.tsx
index 4a4d72c..4b667cb 100644
--- a/src/pages/admin/logout.tsx
+++ b/src/pages/admin/logout.tsx
@@ -1,21 +1,12 @@
 import React from "react";
-import { Redirect } from "react-router-dom";
+import { useRouter } from "next/router";
 import { deleteTokenCookie } from "@utils/auth";
 
-export interface AdminLogoutPageProps {}
-export interface AdminLogoutPageState {}
-
-class AdminLogoutPage extends React.Component<AdminLogoutPageProps, AdminLogoutPageState> {
-  constructor(props) {
-    super(props);
-    deleteTokenCookie();
-  }
-
-  render() {
-    return (
-      <Redirect to="/admin/login" />
-    );
-  }
+const AdminLogoutPage: React.FC = () => {
+  deleteTokenCookie();
+  const router = useRouter();
+  router.push("/admin/login");
+  return null;
 }
 
 export default AdminLogoutPage;
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 679218b..d494f08 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,8 +1,8 @@
 import axios from "axios";
 import Cookies from "js-cookie";
 
-const tokenUrl = `${process.env.API_URL}/api-token-auth/`;
-const checkUrl = `${process.env.API_URL}/api-token-verify/`;
+const tokenUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-auth/`;
+const checkUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-verify/`;
 
 export async function generateToken(username: string, password: string): Promise<string> {
   try {