The latest articles on DEV Community by Amey Kurade (@ameykuradeak). https://dev.to/ameykuradeak https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1118337%2Ffde704ba-a285-4af6-917d-d80baf00a6b1.jpeg https://dev.to/ameykuradeak en Amey Kurade Mon, 07 Apr 2025 07:29:22 +0000 https://dev.to/ameykuradeak/convert-nextjs-to-react-native-with-a-single-cli-command-meet-ntrn-4689 https://dev.to/ameykuradeak/convert-nextjs-to-react-native-with-a-single-cli-command-meet-ntrn-4689 <p>Hey devs! 👋<br><br> Ever wished you could <strong>take your Next.js project and turn it into a working React Native Expo app</strong> without starting from scratch?</p> <p>Well, I did too — so I built <strong><a href="https://github.com/AmeyKuradeAK/ntrn" rel="noopener noreferrer"><code>ntrn</code></a></strong> ✨<br><br> A developer-friendly CLI that transforms your <strong>Next.js App Router project</strong> into a complete mobile app.</p> <h2> 💡 What is <code>ntrn</code>? </h2> <p><code>ntrn</code> is an open-source CLI that:</p> <ul> <li>🔁 Converts <code>app/</code> directory routes from Next.js into <code>screens/</code> for React Native </li> <li>🧠 Transforms <code>layout.tsx</code> into a clean <code>App.tsx</code> root for RN </li> <li>🪄 Uses the <strong>Gemini API</strong> to rewrite your JSX into React Native components </li> <li>🎨 Supports Tailwind to NativeWind automatically </li> <li>📦 Detects required packages and exports them into a <code>requirements.txt</code> for quick setup </li> </ul> <p>It’s like giving your web app a passport to the mobile world 🌍📱</p> <h2> 🛠️ How it Works </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx ntrn convert </code></pre> </div> <p>This command:</p> <ol> <li>Creates a new Expo React Native app </li> <li>Copies &amp; converts your Next.js pages into RN screens </li> <li>Transforms layout into an <code>App.tsx</code> entry point </li> <li>Keeps external component imports (<code>@/components</code> etc.) </li> <li>Outputs necessary dependencies </li> </ol> <p>The goal? Make it feel like a native project you wrote by hand — with minimal lift.</p> <h2> ✨ Why I Built This </h2> <p>As a web developer, I love building in Next.js. But when I wanted to reuse the same structure for a mobile app, there wasn’t an easy way — it felt like starting from zero.</p> <p>So I thought:<br><br> <strong>Why not automate the conversion from Next.js to React Native?</strong></p> <p><code>ntrn</code> was born from that idea — a tool for:</p> <ul> <li>Fullstack devs who want to go cross-platform </li> <li>Indie hackers launching MVPs on both web and mobile </li> <li>Anyone tired of copy-pasting JSX and rewriting layouts </li> </ul> <h2> 📦 Try it Out </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx ntrn convert </code></pre> </div> <p>Or clone it from GitHub:</p> <p>👉 <a href="https://github.com/AmeyKuradeAK/ntrn" rel="noopener noreferrer">https://github.com/AmeyKuradeAK/ntrn</a></p> <h2> 📸 (Optional) Demo GIF or Screenshot </h2> <p><em>Include a quick GIF showing the CLI in action, if you have one</em></p> <h2> 🙏 Looking for Feedback &amp; Contributors </h2> <p>Would love to hear your thoughts:</p> <ul> <li>Is this useful for your workflow? </li> <li>What’s missing or confusing? </li> <li>Want to contribute?</li> </ul> <p>The repo is open to issues, PRs, and stars ⭐️<br><br> Every bit of support means a lot!</p> <p>Thanks for reading! If this helped or inspired you, feel free to drop a ❤️ or share it with someone building fullstack apps!</p> <p>Let’s build cool stuff,<br><br> <strong>~ Amey Kurade</strong></p>