Deploying Next.js and Tailwind CSS on Google App Engine.
Start by creating a new Next.js project if you don’t have one set up already. Let’s open the terminal and paste this command line (you have to install node.js already).
Install Tailwind CSS and necessary package, postcss for a compiler.
npm install -D tailwindcss postcss autoprefixer
Initialize a tailwind config file, and this CLI below will create and initialize ‘tailwind.config.js’.
After installing and initializing the tailwind configuration, open that file to add the paths of template files. I will add two directories, pages for the core source file in Next.js, and components a container many utilities common.
At the last one, Add the Tailwind directives to the project.
styles/globals.css
Now you can develop for sure it’s all work fine.
We will also configure it for Google App Engine deployment if it’s all working. I would say that because the Next.js build system is going to generate all build file to the “.next” directory, but Google App Engine point to the “build” directory by default, so we have to change the build directory in the “next.config.js”, add this props within module exports.
Then delete the “.next” directory and rerun the build.
Creation Next.js and TailwindCSS completed. Next, configure the Google App Engine configuration file. First, create an “app.yaml” file and follow this config.
The last step, open the terminal and deploy.
After all, is completed, you will see a service name’s “project-1-service”. (Google Cloud Console >> App Engine >> Services). You can click on the service name; it opens a new tab to your website page.
Good luck have fund.
