Frontend Settings (Next.js)
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
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.)
.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.
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.
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.
export const protectedRoutes = [ process.env.NEXT_PUBLIC_USER_HOME_ROUTE, // -> default '/profile', '/accout', // ... ];
Customize this file according to your needs.