How to edit your own Next.js website without breaking it

Don’t hunt through folders. Search for them. Copy a short, unusual phrase from the live page, something like “Open Tuesday to Saturday”, and paste it into the search box at the top of your repository on GitHub.

GitHub shows every file containing that phrase. Nine times out of ten there’s one result, and that’s your file. If a phrase isn’t found, try a shorter piece of it. Long sentences are sometimes split across lines in the code.

Open the file and you’ll see your words wrapped in code. Here’s what a typical section looks like.

<section className="py-24">  <h2 className="text-4xl">    Open Tuesday to Saturday  </h2>  <p className="text-lg">    Walk-ins welcome. Call ahead    for groups of six or more.  </p>  <a href="/contact">    Book a table  </a></section>

• Safe: the words between tags, like “Open Tuesday to Saturday” or “Book a table”.
• Safe, carefully: what’s inside quotes after href= (where a button goes) or alt= (an image description). Keep both quote marks.
• Leave alone: className=, curly braces { }, and anything that looks like a word joined to another word with a dot.
• If your sentence has an apostrophe and the build complains, use the curly one (’) instead of the straight one.

1. 01Open the file on GitHub and click the pencil icon at the top right of the file.
2. 02Make your change. Only the words.
3. 03Click Commit changes. In the box that opens, write a short note like “Update opening hours”.
4. 04Choose “Create a new branch for this commit and start a pull request”, then click Propose changes, then Create pull request.
5. 05Wait a minute or two. Your host posts a preview link on the pull request. Open it on your phone and on your computer.
6. 06If it looks right, click Merge pull request. The live site updates on its own a minute or two later.

Committing straight to main skips the preview and goes live immediately. It’s fine for fixing a typo. For anything else, use a branch.

If you merge something and then spot a mistake, it’s two clicks to reverse. That’s covered in how to undo a bad change.

1. 01Make the new image a sensible size first. A photo for a web page should be about 2000 pixels wide at most, and ideally under 500 KB. WebP or JPG both work.
2. 02The easy way: give the new file exactly the same name as the old one. In the public folder on GitHub, click Add file, then Upload files, and drop it in. Same name means the code doesn’t change at all.
3. 03The other way: upload it with a new name, then search the code for the old file name and change it to the new one.
4. 04Update the alt text next to it so it describes the new picture. That’s what screen readers and search engines read.

Each page can say what title and description it wants in search results. Look near the top of that page’s page.tsx for a block called metadata. If a page doesn’t have one, it uses the site-wide one in app/layout.tsx.

export const metadata = {
  title: "Wood-fired pizza in Mount Shasta",
  description: "Open Tuesday to Saturday. Walk-ins welcome, groups call ahead.",
}

While you’re in there, check that the site’s main address is your real domain and not your host’s preview address. If it’s wrong, Google indexes the wrong one. Here’s why Google indexes the wrong domain and the five-minute fix.

Copy a page that already looks close to what you want. If you want a /services page that looks like /about, create a new file at app/services/page.tsx, paste in everything from app/about/page.tsx, and change the words.

Then add a link to it wherever your menu lives, usually a header file in components. Search your repository for an existing menu label like “About” to find it.

GitHub’s editor is great for one file at a time. When a change touches several files, or you want to see it instantly as you type, run the site on your own computer.

git clone <repo-url>
cd <repo-folder>
npm install
npm run dev

Or skip the typing altogether and hand bigger edits to an AI assistant that works on the files for you. That’s part five: editing your site with Claude, ChatGPT or Grok.

Words, images, titles and links are all safe to do yourself. Layout is where it gets harder. Moving a section, changing how something looks on a phone, or adding a form touches the code around the words, and that’s where a small slip breaks the build.

If the preview fails to build, nothing reaches the live site. Read the first error in the build log, undo your last change, and try again, or paste the error into an AI assistant and ask what it means. A failed preview is a warning, not a disaster.