# How to build with Nextal import Tag from '~/components/webkit/Tag.vue'; Nextal is an opinionated Next.js starter that bundles TypeScript, Tailwind CSS, and Hero Icons out of the box. It follows modern conventions such as Dark Mode, Atomic Design folder organization, and absolute imports, giving you a clean, scalable foundation to build production-grade SSR applications. Learn more about [Nextal](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind). --- ## Requirements Before getting started, you must have: - An [Azion platform account](/en/documentation/products/accounts/creating-account/) with [Functions](/en/documentation/products/build/applications/functions/) enabled. - [The latest version of Azion CLI installed](/en/documentation/products/azion-cli/overview/). - A valid [Azion personal token](/en/documentation/products/accounts/personal-tokens/) configured in your terminal environment. - Code editor. - Access to the terminal. - Node.js ≥ 18. --- ## Initializing a Nextal project on the edge 1. Initialize the project: ```sh azion init ``` 2. Give your project a name, or press `enter` to accept the given suggestion: ```sh ? Your application's name: ``` 3. Choose the **OpenNextJS** preset: ```sh ? Choose a preset: [Use arrows to move, type to filter] AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt > OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ``` 4. Choose the **Nextal - (NextJS, Typescript, Tailwind)** template: ```sh ? Choose a template: [Use arrows to move, type to filter] Next.js Multi-tenant Starter Template > Nextal - (NextJS, Typescript, Tailwind) Next.js AI Chatbot Next.js Boilerplate Next.js Commerce with Shopify Next.js Live Transcription Next.js Multi-Tenant Paint by Text ``` 5. With the template fetched and configured, you can now start a local development server. ```sh Do you want to start a local development server? (y/N) ``` The following steps are based on the answer you gave. - [If you chose to have a local development server running](/en/documentation/products/cli/frameworks/nextal/#answering-yes-to-local-dev). - [If you chose not to have a local development server running](/en/documentation/products/cli/frameworks/nextal/#answering-no-to-local-dev). ### Answering yes to local dev 1. Install the project dependencies. Input `y` when the interaction prompts: ```sh Do you want to install project dependencies? This may be required to start local development server (y/N) ``` Wait until the installation is complete. Output: ```sh Your Application was built successfully [Azion] [Server] › ✔ success Function running on port 0.0.0.0:3333, url: http://localhost:3333 ``` 2. On the browser, go to `http://localhost:3333/` and you can see your Nextal project running. #### Deploying the project When your project is running locally, you're still able to deploy it to the Azion Web Platform. To do so: 1. Stop the terminal execution with `control + c`. 2. Access the project folder: ```sh cd [your-project-name] ``` 3. Deploy the project: ```sh azion deploy ``` 4. Wait while the project is built and deployed to the Azion Web Platform. :::note Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link. ::: After the deployment is complete, you'll receive a Workload to access your Nextal project on the Azion Web Platform. Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to `https://xxxxxxx.map.azionedge.net`. ### Answering no to local dev After indicating you don't want to have a local server running, deploy the Nextal project to the Azion Web Platform. 1. Enter `y` to the following interaction, indicating you want to deploy the project: ```sh Do you want to deploy your project? (y/N) ``` 2. Install the project dependencies. Input `y` when the interaction prompts: ```sh Do you want to install project dependencies? This may be required to deploy your project (y/N) ``` 3. Wait while the project is built and deployed to the Azion Web Platform. :::note Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link. ::: After the deployment is complete, you'll receive a Workload to access your Nextal project on the Azion Web Platform. Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to `https://xxxxxxx.map.azionedge.net`. --- ## Compatibility For more information about Next.js compatibility on the Azion Web Platform, visit the [Next.js frameworks compatibility page](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/).