DEV Community

Cover image for Next.js and React Native Setup: My Step-by-Step Guide to Building Apps with Ease
Ellis Pike
Ellis Pike

Posted on

Next.js and React Native Setup: My Step-by-Step Guide to Building Apps with Ease

#ai #nextjs #reactnative #tutorial

A few years ago, I remember how creating web and mobile apps felt overwhelming. I had to jump between different languages and tools. Now, though, things have changed a lot. By 2025, frameworks like Next.js and React Native, plus AI development tools, have made building strong, fast apps much easier for me. If you want to build web apps, native mobile apps, or both, I can walk you through my hands-on Next.js and React Native setup from start to finish. I’ll also show you how I use AI and new tools to work much faster and with fewer headaches.

Note: This piece incorporates AI-assisted writing and may reference businesses I'm affiliated with.

Let me break down each step for you. No unnecessary details, just what helped me get projects started quickly and smoothly for real users.

Why I Chose Next.js and React Native

I want to start by sharing why these two frameworks became game-changers for me in 2025.

  • Next.js became my go-to React framework for making websites and web apps that feel fast and professional. It comes ready with routing, server-side rendering, API routes, and SEO features. My big sites load quickly and rank well in search engines without me having to do anything tricky.
  • React Native made it possible for me to build true native apps for iOS, Android, and even the web. I use the same JavaScript code and the React style I’m already used to. I don’t have to learn new languages like Swift or Kotlin. I work faster, I keep things clean, and feedback comes as soon as I make a change.
  • AI-Driven Tools have really changed how I build. New platforms let AI agents do things that used to slow me down like wiring things up, configuring projects, and building standard features. This means I hit fewer bugs during setup and I can spend my time on what makes my app special.

Setting Up a Next.js Web App

Starting my first Next.js project surprised me by how easy it felt. This is my tried-and-true method for a modern setup, with all the parenthesis essentials like formatting, deployment, and making a setup I can use over and over.

How I Install Next.js

I like using pnpm because it feels quick and simple.

First, I open my terminal and run:

pnpm create next-app@latest
Enter fullscreen mode Exit fullscreen mode

A few prompts pop up asking for my choices. These are what I usually pick for a strong, modern starting place:

  • I pick TypeScript
  • I enable ESLint
  • I choose Tailwind CSS
  • I go with the “app directory” routing system
  • I keep the default import alias

Next.js quickly sets up a project for me with all the tools I need.

My Formatting and Styling Tools

I want my code to look clean for me and anyone else who joins the project. I always add Prettier and its Tailwind CSS plugin. I do this by running:

pnpm add -D prettier prettier-plugin-tailwindcss
Enter fullscreen mode Exit fullscreen mode

Next, I create a .prettierrc file in the root directory. This helps everyone stick to the same formatting rules. Trust me, it stops so many little arguments about code style later on.

Boilerplate and Cleanup

  • I swap out the default homepage for a basic, fresh component that I understand.
  • I delete extra CSS and React imports I do not need.
  • I tweak my tailwind.config.js for centered containers, breakout points for devices, and any theme touches I want.
  • I save my setup with a clear git commit like initial setup.

Version Control and Deployment

  • I push everything to GitHub.
  • I set my repo as a template in GitHub settings, so I can reuse this starting point for every new project. It means I do not have to copy files by hand anymore.
  • I link my GitHub repo to Vercel. When I push new code, Vercel automatically builds and deploys the site. I get to see changes live almost right away. That keeps testers, teammates, and users happy.

For me, this approach means every update is out there, tested, and ready for real feedback within minutes. It takes so much stress out of releases.

Setting Up a React Native + Expo Project (My 2025 Experience)

My first mobile app with React Native was much simpler than old guides made it sound. Today’s IDEs and AI assistants like Windsurf’s Cascade lift away lots of the heavy lifting. Expo, in particular, helps avoid tricky native setups up front.

How I Start a Clean, Ready Project

  1. My IDE and Assistant

    These days, I open up Windsurf, which has Cascade AI agents built right in. It scaffolds projects for me. I do not need to manually sort through dependencies.

  2. Prompting the Agent

    I just type a message like:

    “Create a React Native app using Expo SDK 54 and EAS. Set up a dashboard, cart, and settings screen. Fill with placeholder data for a grocery shopping app. Skip real features for now though.”

Cascade then makes an Expo project with the right folder layout, navigation, and EAS for simple builds and submissions.

  1. Upgrading Visual Design Once the basic app is ready, I give the agent another command: “Make the design look like other modern shopping cart apps. Freshen the UI and focus on easy clarity.”

Now my app looks like something I want to use, without the plain setup that early React Native had.

Cross-Platform UI Components (and a Big Time Saver)

One challenge I kept running into was the need for UI component libraries that work well on both web and mobile without locking me into rigid structures or heavy dependencies. Around this point in my process, I started integrating libraries like gluestack. It lets me pull in modular, copy-paste-ready UI components that I can directly use in both my React, Next.js, and React Native projects. With full support for styling through Tailwind CSS and NativeWind, gluestack helps me ensure consistent, accessible interfaces no matter the platform, saving me tons of time wrestling with design details and keeping my codebase truly universal.

How I Add Real Features, Step by Step

  • I start replacing fake data with real lists. Users can make, group, and handle several shopping lists. The dashboard pulls everything together.
  • I build smart features such as filters for category, price, and store. I add search. These small touches make big lists easy to manage and stop user frustration.
  • I add a suggestion tool so things people buy often show up at the top, ready to add.
  • I drop in a simple budget tracker. People can see right away if they’re spending too much.
  • I create a catalogue view so folks can scroll and add common grocery items. This saves typing every week.
  • I finish with a dark mode toggle. I use my apps late at night and bright screens really bother me.

Every one of these features comes from a quick prompt to Cascade. The AI wires up the screens and the app’s overall state.

Testing for Responsiveness and Interaction

I use Expo’s instant preview to see my app on Android, iOS, or the web right away. I like using fast refresh. It lets me check changes live as soon as I save.

I tap through every screen. I add and remove list items. I try filters and check if dashboard numbers update right away. I learned that this level of smoothness is just expected by users now.

Getting Ready for App Store Submission

Expo App Services (EAS) is a lifesaver here. It takes me only minutes to prep for the Apple App Store or Google Play.

  • I edit my app.json or app.config for display names, icons, and permissions.
  • I test everything on real phones using Expo Go or EAS.
  • I submit the finished app through the EAS submission process.

Here’s How AI Helps Me Build So Much Faster

AI support changed my life as a developer. What took me weeks before, like setup and UI wiring, can now be handed to an AI agent after a good prompt. The AI covers the boring stuff, follows modern best practices, and tweaks the look until it fits new UX trends.

This does much more than save me time. It opens doors for non-coders and for people with ideas who just want to see something real. But I learned that my clear direction is still important. The better I describe what I want, the better and faster the AI can do its job.

Here’s my trick: I keep my AI prompts in a shared doc or workspace. I reuse them to build new features, or as starting points for future apps. It saves me every time.

What’s Worked Best For Me: My Setup Tips

  • Start off with templates and let AI handle the setup. I focus on custom features, not repeating the same configs again and again.
  • Build with live deployment from day one. I always push to Vercel (for Next.js) or test with Expo. Bugs show up early, not just right before I launch.
  • Keep my starter project simple and clean. If I don’t need it right away, I leave it out. Less clutter saves me later.
  • Make design look good up front, before features get big. A polished layout means it’s easier to keep features feeling smooth and natural.
  • Write down my AI prompts and share them with the team. Consistency makes it so much easier to work with others, fix problems, or train someone new.

FAQ

How do I decide between Next.js and React Native for my app?

When I want a website or something that needs to show up in Google search, I use Next.js. For mobile (iOS or Android), React Native plus Expo is my pick. Sometimes, I use Next.js for the website part and React Native for the mobile version. I can even share pieces of business logic through npm packages.

Can I use the same React components for both Next.js and React Native?

Both use React, so parts of my logic and hooks can be shared. But the visual bits are different. Next.js uses web elements, and React Native uses its own set (like <View> and <Text>). Some libraries help with cross-platform development, but UI code still needs to fit the platform.

Do I need to know native iOS or Android code to use React Native?

I almost never need native code. With React Native and Expo, JavaScript is enough for most things. Sometimes, very advanced features need a little native module setup. But for my usual projects, I stay in JavaScript and avoid native land.

What are the main benefits of using AI-driven tools during setup?

AI tools have cut my setup time by a huge amount. I can go from prompt to working feature incredibly fast. The AI takes care of wiring, best practices, and even modernizes the look for me. That frees me up for the meaningful work-making things users will love.

Ready to build your first web or mobile app? I know from experience that with the right setup, modern tools, and a little help from AI, you can turn ideas into real products much faster and with far less stress. You don't need to get stuck in debugging hell anymore. Good luck, and enjoy shipping your next app!

Top comments (0)