https://github.com/emanuelefavero/nextjs-search-query
This is a simple Next.js app that implements a search query using Next.js API routes
https://github.com/emanuelefavero/nextjs-search-query
api nextjs query search url-parameters
Last synced: about 2 months ago
JSON representation
This is a simple Next.js app that implements a search query using Next.js API routes
- Host: GitHub
- URL: https://github.com/emanuelefavero/nextjs-search-query
- Owner: emanuelefavero
- License: mit
- Created: 2023-02-21T10:31:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T20:55:25.000Z (about 2 years ago)
- Last Synced: 2025-02-04T16:50:29.547Z (4 months ago)
- Topics: api, nextjs, query, search, url-parameters
- Language: TypeScript
- Homepage: https://nextjs-search-query.vercel.app
- Size: 56.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Next.js Search Query
This is a simple Next.js app that implements a search query using Next.js API routes
## Live Demo
- [https://nextjs-search-query.vercel.app/](https://nextjs-search-query.vercel.app/)
#### Screenshot
## Getting Started
- clone the repo and `cd` into the directory
- run `npm install` to install dependencies
- run `npm run dev` to start the development server
## How it works
The search query is implemented in 3 steps:
- A json file at the root of the project called `posts.json` that contains an array of posts with their id and title
- An API route that accepts a query parameter and returns the matching posts from the `posts.json` file
- A search component that uses fetch to call the API route and displays the results
## How to use
- Open the app in your browser
- Type in the search bar the post title that you need to search and click on the search button
- The results will be displayed below the search bar
> Note: Check `posts.json` to see the available post titles
>
> EXAMPLE SEARCHES: `"first post"`, `"post"`, `""`
## License
- [MIT](LICENSE.md)