Alright, let’s talk about this thing I decided to try out recently. I’d been hearing chatter about it, you know, this ‘Next’ framework for web stuff. Sounded interesting, maybe a bit faster, maybe easier for some things. I figured, why not give it a whirl? Can’t hurt to see what the fuss is about.
Getting Started
So, I sat down, opened up my command line thingy. Didn’t want to overthink it, just jump right in. I ran that command they tell you to use, the `create-next-app` one. It asked a few questions, like project name, if I wanted TypeScript (skipped that for now, keep it simple), and some other bits. Let it do its thing, installing all the packages.
Once it finished, I navigated into the new folder it made. Looked around a bit. Saw the `pages` directory. Seemed logical enough – you put your page files in there. Ran the development server command, `npm run dev` I think it was. Popped open the browser to the local address it gave me. Bam! There was the default * starter page. Okay, step one complete. It works.
Making Something Basic
First thing, I wanted to see how routing worked. I went into the `pages` folder and duplicated the `*` file, renamed it to `*`. Changed the content inside to something simple like “This is the About Page”. Saved it. Went back to the browser and just typed `/about` after the local address. It worked straight away. Nice. No complex router setup needed for basic stuff. That felt pretty smooth, I have to admit.
Then I thought, let’s try linking between pages. Went back into `*`. Found the main content area. Needed to figure out how to make a link. Remembered seeing something about a “ component. Imported that from `next/link`. Wrapped an anchor tag `` inside it, setting the `href` on the “ component to `/about`. Saved again. Clicked the link on the homepage, and it went to the about page instantly, without a full page reload. Okay, that’s cool. Client-side navigation built-in.
Trying Out API Routes
This was the part I was curious about. Heard you could build simple API endpoints right inside the same project. Seemed handy.
- I went back to the `pages` folder.
- Made a new folder inside it called `api`.
- Inside `api`, I created a file, let’s call it `*`.
- Inside `*`, I wrote a simple function. The basic handler function you see in examples, taking `req` and `res` as arguments.
- Made it send back a JSON response: `*(200).json({ message: ‘Hello there!’ })`.
Saved that file. Now, how to test it? Just went to the browser and typed `/api/hello` after the local address. And boom, saw the JSON message right there. `{ “message”: “Hello there!” }`. Seriously simple. No separate server setup, no extra configurations for this basic case. Just create a file in the right place.
Wrapping Up (For Now)
So yeah, that was my initial dip into it. Got the basics running, made a couple of pages, linked them, and even set up a super simple API endpoint. It felt quite direct, less boilerplate for these specific things compared to some older setups I’ve used. Of course, this is just scratching the surface. I haven’t touched data fetching, styling strategies, or deploying it yet. But for a first look, a quick “flirt” if you will, it was pretty straightforward. Didn’t hit any major walls, just followed the initial path. Seems like it could be useful. We’ll see if I take it further.
