Frontend Settings (Next.js)

Environment variables

We now take care of settings up our frontend. Therefore, navigate to the /client directory, where our Next.js app lives. First things first, we need to run npm install to install all our dependencies. Next, copy and paste the .env.local.example file and rename it to .env.local

cd client; cp .env.local.example .env.local

Next.js can handle the .env.local file out of the box and even allows us to access the environment variables in the browser. For more information visit their environment variables documentation. In a nutshell, it tells us that all variables that start with NEXT_PUBLIC_ will be accessible in the browser, which is great news for us!

NEXT_PUBLIC_API_HOST_URL is the URL and host our Laravel API runs on. It defaults to http://localhost:8000. Customize it to your requirements. NEXT_PUBLIC_USER_HOME_ROUTE is the home route for authenticated users, as the name indicates. It is the route a user will be redirected to after authentication, for example. NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID is your Google Tag Manager Container ID. If you leave it empty, Google Tag Manager won’t be integrated. However, if you build production ready application, it is highly advised to do so (see more later.)

TypeScript support

The app is written with TypeScript. If you instead want good old Javascript you must change all file extensions from .tsx to .jsx or .js. You then also have go through all the files and delete TypeScript specific syntax. Our advise is to leave it as it is and just use the .js extension in the files you create of top of the Starter Kit, if you don't want to use TypeScript.

config.tsx

You might have already noticed that there is a file named /client/config/config.tsx, which does not ship with Next.js by default. This file handles some default configurations for us. We use axios to make api requests and make some default configurations that our Laravel backend requires. Also, we export a variable named protectedRoutes. It is an array of routes/slugs that will not be accessible for unauthenticated users. The list also respects sub-routes, which means if we include „/dashboard“, „/dashboard/a“ or „/dashboard/a/b/c“ will be protected as well. For example:

export const protectedRoutes = [
  process.env.NEXT_PUBLIC_USER_HOME_ROUTE, // -> default
  '/profile',
  '/accout',
  // ...
];

Customize this file according to your needs.